Capability Selector

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature12.tsx instead.

Usage

The file also exports feature12Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature12, feature12Demo } from "@/components/blocks/feature/feature12";

export default function Page() {
  return <Feature12 {...feature12Demo} />;
}

Props

Types

interface Feature12Capability {
  title: string;
  blurb: string;
  paragraph: string;
  image?: { src: string; alt: string };
  assetLabel: string;
  assetValue: string;
}

Behavior notes

• Real interactivity: clicking a row in the hairline list updates local state and swaps the image, floating asset badge, and supporting paragraph on the right to that capability's values.
• The first capability in the array is selected by default; there is no URL or prop-driven initial selection.
• Icons next to each list item are a fixed set of four lucide icons indexed by array position, not accepted as a prop; a capabilities array longer than four repeats the icon set.
• The floating asset badge values are static per-capability demo props, not a real live feed, they simply change instantly when you click a different capability.