Interactive Pillar Tabs & Image

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

Usage

The file also exports about26Demo, 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 { About26, about26Demo } from "@/components/blocks/about/about26";

export default function Page() {
  return <About26 {...about26Demo} />;
}

Props

Types

type Pillar = {
  icon: LucideIcon;
  label: string;
  description: string;
};

Behavior notes

• 'Interactive tabs' and 'crossfading image' in the brief describe the inspiration's polish only; this is a plain server component where activeIndex is a static prop, not client state, so exactly one pillar renders expanded on every page load rather than responding to hover.
• Unlike About16's 3-column pillar grid where every card is equal, this block renders pillars as a single vertical list with only the activeIndex entry showing its description, an accordion-style layout rather than a grid.
• The header is centered like About12's heading block, but About12 lays its steps out in a 4-column grid below, while this block pairs a single-column list with a side image instead.