Hero191: Two Steps Hero

An install hero that explains itself in two numbered steps under a rule: run the command on the left, and see the sentence you would type next on the right.

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

Base UI flavor

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

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

Quick start

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

import { Hero191, hero191Demo } from "@/components/beste/block/hero191";

export default function Page() {
  return <Hero191 {...hero191Demo} />;
}

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

import { Hero191 } from "@/components/beste/block/hero191";

export default function Page() {
  return (
    <Hero191
      eyebrow="Two steps, no setup screen"
      heading="Install once. Ask forever."
      description="Your agent learns where the finished sections live, then builds from them."
      install={{
        number: "01",
        title: "Run this in your project",
        command: "npx your-cli@latest",
        copyLabel: "Copy command",
        copiedLabel: "Copied",
        note: "Adds the MCP server to your agent.",
      }}
      ask={{ number: "02", title: "Then ask for a page", prompt: "Build a pricing page with three plans." }}
      buttons={[{ label: "See what it builds", href: "/blocks" }]}
    />
  );
}

Props

type Install = {
  number: string;
  title: string;
  command: string;
  copyLabel: string;
  copiedLabel: string;
  note?: string;
};

type Ask = {
  number: string;
  title: string;
  prompt: string;
  note?: string;
};

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

Behavior notes

• The two steps are deliberately asymmetric: the first is an action with a copy target, the second is only an illustration, so the prompt sits in a muted panel that reads as an example rather than a field.
• Both step numbers are rendered in the same small-caps line as their title, which keeps the pair reading as one label instead of a number stacked over a heading.
• The steps sit under a single rule spanning the full container, so on a phone they stack into one continuous list rather than two boxed cards.
• The command pill fills its column and truncates the command rather than wrapping it, so a long package name never breaks the pill's shape.
• Copying flips both the icon and a visually hidden live region, and resets after two seconds through a cleared timeout.
• The headline runs with trigger="mount" and everything after it is offset from the word count, so the steps arrive after the last word lands.
• Either step can be omitted, in which case the remaining one takes the full width of the grid.