Slide patterns

Choose a complete slide recipe by what the slide needs to do, then edit the installed React source when the recipe needs to change.

A pattern is a whole-slide frame and the block that goes inside it. Each picture opens that slide in the feature deck.

The pictures are a selection. Find a pattern by intent covers every block.

Choose the frame first

Use HeroSlide, BreakerSlide, StatementSlide, QuoteSlide, and ProseSlide as complete slides. They own the composition.

Use OpenContentSlide around a block that paints its own border or background, including BulletList, StatGrid, FeatureGrid, CardGrid, DataTable, Timeline, LogList, and RevealList.

Use ContentSlideCard for flat prose or custom markup with no frame of its own. Use FocusSlide when one block is the slide and a heading would repeat what the block already says.

import { OpenContentSlide, StatGrid } from "@/app/slides/blocks"

const figures = [
  { value: "6.2s", caption: "Median build time" },
  { value: "0", unit: "%", caption: "Slides fixed after export" },
] as const

<OpenContentSlide eyebrow="Quarter in review" title="The numbers that moved">
  <StatGrid items={figures} />
</OpenContentSlide>

Find a pattern by intent

The blocks and registry guide documents installation, composition rules, and the individual source files.