About Strip

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/about/about46.tsx instead.

Usage

The file also exports about46Demo, 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 { About46, about46Demo } from "@/components/blocks/about/about46";

export default function Page() {
  return <About46 {...about46Demo} />;
}

Props

Types

type StripCard =
  | { type: "image"; image: MediaSlotImage; caption?: string }
  | { type: "stat"; value: string; label: string }
  | { type: "quote"; quote: string; name: string }
  | { type: "values"; heading: string; items: string[] };

Behavior notes

• The strip is a plain `flex gap-6 overflow-x-auto` row of fixed-width, shrink-0 cards, scrollable by native touch/trackpad/drag only, unlike About35's media reel or any tabbed/paged pattern; there is no JS scroll handling anywhere in the component.
• cards is a single discriminated union array rather than four separate props, so callers can mix, omit, or repeat card types and reorder them freely; the component picks the card shape per item from its `type` field.
• Unlike About45's founder pull-quote, the quote card here is one compact tile among several in a strip rather than the section's sole focal point, and it has no avatar or portrait attached.