Chaptered About

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

Usage

The file also exports about50Demo, 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 { About50, about50Demo } from "@/components/blocks/about/about50";

export default function Page() {
  return <About50 {...about50Demo} />;
}

Props

Types

type Chapter = { title: string; body: string };

Behavior notes

• Chapter numbers are generated from array index and prefixed with the literal word "Chapter", unlike About48's principles list or About12's process steps, which show a bare zero-padded numeral with no label.
• Like About48, the photo column uses lg:sticky lg:top-24 to stay pinned while the right column scrolls, but About50's right column is a single flowing story broken into chapters rather than About48's list of short, independent principles.
• chapters is a required array with no default, since a chaptered story with zero chapters has no content to justify the layout; eyebrow and heading are optional and collapse their wrapping div entirely when both are omitted.