Hero188: Single Command Hero

The smallest install hero in the set: a headline that settles in word by word, one rounded pill holding the command, and a single line of reassurance underneath.

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/hero188?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero188.tsx plus the text1 word stagger it uses.

Quick start

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

import { Hero188, hero188Demo } from "@/components/beste/block/hero188";

export default function Page() {
  return <Hero188 {...hero188Demo} />;
}

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

import { Hero188 } from "@/components/beste/block/hero188";

export default function Page() {
  return (
    <Hero188
      heading="Give your agent every screen."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      note="Works with Claude Code, Cursor and Codex."
      link={{ label: "Read the docs", href: "/docs" }}
    />
  );
}

Props

type Link = {
  label: string;
  href: string;
};

Behavior notes

• The whole pill is the copy target, so there is no separate icon button to aim at. navigator.clipboard is called optionally, so a browser that blocks it still flips the label rather than throwing.
• The copied state resets itself after two seconds through a cleared setTimeout, so leaving the page mid-flight never leaves a stray timer behind.
• A visually hidden aria-live region announces the copied label, while the icon swap from copy to tick carries the same message for sighted readers.
• The headline runs with trigger="mount", since a hero is above the fold and a scroll-triggered stagger would never fire.
• The note and link are offset from 0.4 + heading.split(" ").length * 0.07, so they arrive after the last word however long the headline runs.
• Nothing here loads: no photograph, no grain filter, no scroll listener. The section paints as soon as the font does.
• Every prop is optional, so this collapses to a headline and a pill without any layout compensation.