Selected Work Bento

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

Usage

The file also exports bento3Demo, 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 { Bento3, bento3Demo } from "@/components/blocks/bento/bento3";

export default function Page() {
  return <Bento3 {...bento3Demo} />;
}

Props

Types

interface WorkItem {
  title: string;
  category: string;
  photo: { src: string; alt: string };
  featured?: boolean;
}

interface StatementTile {
  heading: ReactNode;
  body: string;
}

interface FigureTile {
  figure: string;
  caption: string;
}

Behavior notes

• Purely presentational: no local state, no click-through to a real case study page.
• The lead tile is picked with `works.find((w) => w.featured) ?? works[0]`, so exactly one work item is always promoted to the large tile even if none is explicitly flagged featured.
• The grid is tuned for three work items (one lead plus two smaller); passing more than three will still render correctly but will overflow the neatly-packed six-column, three-row layout the demo shows.