Hero193: Ink Command Hero

A dark hero with no photograph, where the command itself is the largest thing on the page: set in monospace under a hairline, it copies on click and confirms with a tick.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero193?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero193?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero193.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports hero193Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero193, hero193Demo } from "@/components/beste/block/hero193";

export default function Page() {
  return <Hero193 {...hero193Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero193 } from "@/components/beste/block/hero193";

export default function Page() {
  return (
    <Hero193
      eyebrow="Sections for coding agents"
      heading="Everything starts here."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      description="Paste it into your project and your agent gets every page you will need."
      buttons={[{ label: "See what it builds", href: "/blocks", tone: "light" }]}
      facts={[{ value: "1,500", label: "Finished sections" }]}
    />
  );
}

Props

type Fact = {
  value: string;
  label: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The headline is deliberately smaller than the command. Keep it to three or four words, because anything longer starts competing with the line it is introducing.
• The command wraps rather than shrinks: its row is a flex container that allows wrapping, so a long package name breaks onto a second line instead of overflowing on a phone.
• The underline is a border on the command text alone, not the whole row, so the dollar sign and the copy circle sit outside it.
• Grain is an inline feTurbulence filter at 8 percent in soft light, with its id from useId so several grained blocks on one page never collide.
• Everything on this surface uses fixed background tokens rather than adaptive ones, because the panel is painted ink in both themes.
• Buttons default to the light tone, the pill built to sit on a dark surface.
• There is no image and no scroll listener, so this is the cheapest of the dark heroes to paint.