Ask At Any Size Tabs

Feature298: Ask At Any Size Tabs

Three tabs for the three sizes a request can take: whole pages, single sections, or the small parts, each with example prompts beside a photograph that drifts on scroll.

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

Base UI flavor

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

This installs the block to components/beste/block/feature298.tsx plus the text1 word stagger and the shadcn tabs primitive it uses.

Quick start

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

import { Feature298, feature298Demo } from "@/components/beste/block/feature298";

export default function Page() {
  return <Feature298 {...feature298Demo} />;
}

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

import { Feature298 } from "@/components/beste/block/feature298";

export default function Page() {
  return (
    <Feature298
      eyebrow="Things you can ask for"
      heading="From a whole page to a single button."
      description="The library is layered. Ask at whichever size fits the moment."
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      promptsLabel="Try asking"
      tabs={[
        {
          tabLabel: "Pages",
          title: "Whole pages, composed",
          description: "A landing page arrives as a set of sections that agree with each other.",
          prompts: ["Build a landing page for a therapy practice."],
          image: { src: "/photos/cove.jpg", alt: "A rocky cove with wildflowers above turquoise water" },
        },
      ]}
    />
  );
}

Props

type Tab = {
  tabLabel: string;
  title: string;
  description: string;
  prompts: string[];
  image: { src: string; alt: string };
};

Behavior notes

• Tabs are the shadcn primitive rather than a hand-rolled useState switch, which is what gives the arrow-key navigation and the roving focus for free.
• tabLabel doubles as the tab's value, so labels must be unique within one block.
• The trigger list is a pill rather than the default underline: rounded, muted, with the active trigger taking the paper surface and no shadow.
• All tab panels share one scroll target, so a picture revealed by switching tabs picks up the parallax already in progress rather than starting from zero.
• Each picture fades up only once its own file has loaded, so switching to a tab whose image is cold does not flash an empty frame.
• Prompts are muted mono panels with a chevron marker, deliberately not inputs, so nobody tries to type into them.
• The command pill sits at the right end of the heading, which keeps the tab list as the first thing under the header.