Start and divide
Whole slideOpener
HeroSlideUse this when one title and one line need the whole room.
Show composition
<HeroSlide eyebrow="Engineering all-hands" title="What we shipped" />Slides are React components
Start with editable slide patterns and a theme. Add your own React when the talk needs a chart, a live demo, or data loaded by Next.js. Present from the browser, export the PDF, and hand the same source to your coding agent.
npx @thebuilder/deckard-cli init my-talkSet up a new Deckard presentation in ./my-talk with npx @thebuilder/deckard-cli initWrites a Next.js app with a sample deck in it, installs it, and makes the first commit. Deckard is in preview: the API can still move before 1.0.
Paste it into Claude Code, Cursor, or Codex. The agent runs the scaffold and picks up the deck from there.
Start with a slide pattern
Choose by what the slide needs to do. Each recipe pairs a whole-slide frame with the content block that fits inside it, and every block lands in your app as editable source.
Start and divide
Whole slideSection break
BreakerSlideUse this to reset the room before the next part of the argument.
Show composition
<BreakerSlide eyebrow="The trade" title="What it cost" description={summary} />
Explain and emphasise
Slide recipeNumbered argument
OpenContentSlide + BulletListUse this when the order matters and each point earns a full sentence.
Show composition
<OpenContentSlide title="How we got there"><BulletList items={points} /></OpenContentSlide>
Show data and activity
Slide recipeKey figures
OpenContentSlide + StatGridUse this when a small set of numbers carries the argument.
Show composition
<OpenContentSlide title="The numbers"><StatGrid items={figures} /></OpenContentSlide>
Explain and emphasise
Whole slideFramed explanation
ContentSlideCardUse this for flat prose or a definition that needs one clear frame.
Show composition
<ContentSlideCard title="The decision"><p>{explanation}</p></ContentSlideCard>
Compare and organise
Slide recipeOption comparison
OpenContentSlide + CardGridUse this when each alternative needs a name and a short explanation.
Show composition
<OpenContentSlide title="Three ways forward"><CardGrid items={options} /></OpenContentSlide>
Compare and organise
Slide recipeRoadmap
OpenContentSlide + TimelineUse this when dates and sequence matter more than exact duration.
Show composition
<OpenContentSlide title="The next release"><Timeline items={milestones} /></OpenContentSlide>
Explain and emphasise
Whole slidePull quote
QuoteSlideUse this when someone else's sentence is the evidence.
Show composition
<QuoteSlide attribution="Maya Chen" quote={quote} />
Show media
Whole slideImage and explanation
ImageShowcaseSlideUse this when the image needs context beside it rather than text on top.
Show composition
<ImageShowcaseSlide image={image}><SlideHeading title="Field notes" /></ImageShowcaseSlide>Open the pattern guide for composition rules and the full intent index. Explore every Deckard featurein the reference deck.
Write slides in React
Your own components, or the layouts Deckard ships. A chart, a table, a code sample, a video, a running demo, data Next.js loaded for you. Pick a slide to see the code behind it.
import type { SlideDefinition } from "@thebuilder/deckard-core"
import {
BreakerSlide,
BulletList,
HeroSlide,
OpenContentSlide,
StatGrid,
} from "@/app/slides/blocks"
export const slides: SlideDefinition[] = [
{
slug: "intro",
title: "What we shipped in Q1",
body: <HeroSlide eyebrow="Engineering all-hands" />,
},
{
title: "The three numbers that moved",
notes: "Pause on the middle figure. They ask about that one.",
body: (
<OpenContentSlide eyebrow="Quarter in review">
<StatGrid items={quarterly} />
</OpenContentSlide>
),
},
{
title: "How we got there",
body: (
<OpenContentSlide eyebrow="The work">
<BulletList items={decisions} />
</OpenContentSlide>
),
},
{
title: "The bill for all of it",
background: "spotlight",
body: (
<BreakerSlide description={theBill} eyebrow="The trade" />
),
},
]A hero layout: an eyebrow, the title, and one line under it.
A stat grid of three figures. The notes stay off the canvas.
The same slide with a bullet list in it instead.
A section break, painted on the theme's spotlight backdrop.
Server and client components are both supported.
One layout everywhere
Every slide is drawn on one fixed 1920x1080 canvas that scales to fit the screen. Nothing inside it reflows, so the two frames below are the same slide at two widths. Present, screenshot, and export a PDF from that layout.
deckard export pdf prints that canvas through the same slide routes the deck runs on, one page per slide.
Present from the browser
Arrow keys walk the reveal steps on a slide and then move to the next one. P opens presenter mode in a second window: your notes, a timer, the slide you are on, and what comes next.
Start with a theme
Pick a built-in and switch with one import. Eject it when you want to edit the CSS. Blocks install into your app as source, so their markup is yours to change.
One deck, ten themes. Open the gallery for each of them in light and dark.
Check and export
A fixed canvas does not scroll, so content that does not fit is clipped. Find those slides, review the whole deck as a contact sheet, and produce the PDF.
deckard check-overflow # fails, naming the slides the canvas clips
deckard contact-sheet # every slide in one grid image
deckard export pdf # one page per slideHand the deck to an agent
A deck is a TypeScript array in a Next.js app, so an agent edits it the way it edits the rest of your code. What it needs to do that well ships with Deckard.
A skill
npx skills add thebuilder/deckard installs the slide-authoring skill: the blocks, when a slide earns its own file, the Server Component boundary, canvas sizing, and the token contract.
The docs in one file
/llms.txt indexes the site and /llms-full.txt carries every page, so the whole reference fits in a context window.
Checks it can run
deckard validate and check-overflow exit non-zero and name the slide. contact-sheet writes every slide into one image an agent can read back before you look.