Introduction

Deckard is a React presentation framework for Next.js. Slides are components, the canvas is a fixed 1920x1080, and the look is a theme you can eject.

Deckard builds presentations out of React components. A slide is a body and some metadata, the deck is an array of those, and everything the audience sees is painted inside one fixed 1920x1080 canvas that scales to whatever screen it lands on.

That last part is the trade. You give up responsive layout inside a slide and you get back certainty: the deck looks the same on your laptop, the venue projector, a phone, and in the exported PDF. Only the scale changes.

Who it is for

People who already write React and would rather not leave it to make slides. If a slide needs a live chart, a running demo, a table pulled from an API, or a code sample with real syntax highlighting, it is a component like any other component, and it awaits its own data before it renders.

If your deck is bullet points and a photo, Deckard will do that too, but so will Keynote, and Keynote will not ask you to run pnpm install.

What a deck looks like

import type { SlideDefinition } from "@thebuilder/deckard-core"
import { FocusSlide, HeroSlide, StatGrid } from "@/app/slides/blocks"

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

export const slides: SlideDefinition[] = [
  {
    slug: "intro",
    title: "Deckard",
    body: <HeroSlide eyebrow="A talk" />,
  },
  {
    title: "The numbers",
    notes: "Pause here. The middle figure is the one they will ask about.",
    body: (
      <FocusSlide>
        <StatGrid items={quarterly} />
      </FocusSlide>
    ),
  },
]

import { defineDeck } from "@thebuilder/deckard-core"
import { phosphor } from "@thebuilder/deckard-themes"
import { slides } from "@/deck/slides"

export const deck = defineDeck({
  description: "What we shipped and what it cost.",
  footer: { mode: "visible" },
  header: { brand: "Acme", href: "/", meta: "March 2026", mode: "auto" },
  slides,
  theme: phosphor,
  title: "Q1 review",
})

The array is the deck order. defineDeck resolves it: every slide gets an id, a number, a URL, and its chrome defaults filled in. Nothing reorders your array, so moving a slide in it is the only way to move it in the deck.

The packages

Slide blocks are the other piece, and not a package. They install into your app as source through a shadcn registry, and you edit them from then on.

Where to go next