🚀 First Deck

What does a working React deck look like, end to end?

2 min readView as markdown

This walks through a React deck. If you want the markdown path instead, see Markdown mode — it is shorter.

1. Scaffold

npm create narro@latest my-first-deck -- --template minimal
cd my-first-deck
npm install

2. Write the slides

Open src/App.tsx. Note where each component comes from: the structural pieces are in @getnarro/core, the content pieces in @getnarro/shared-ui.

import { Notes, Presentation, Slide, SlideContent } from "@getnarro/core";
import { Heading, List, Text } from "@getnarro/shared-ui";

export function App() {
  return (
    <Presentation aspectRatio="16:9">
      <Slide id="title" className="bg-gradient-to-br from-blue-900 to-slate-900">
        <SlideContent layout="centered">
          <Heading level={1} align="center">
            Welcome to Narro
          </Heading>
          <Text size="xl" align="center" color="muted">
            Build presentations with React
          </Text>
        </SlideContent>
        <Notes>Introduce yourself and set up the problem.</Notes>
      </Slide>

      <Slide id="features" className="bg-slate-900">
        <SlideContent>
          <Heading level={2}>Why Narro?</Heading>
          <List
            variant="check"
            items={[
              "React components as slides",
              "Tailwind for styling",
              "Export to PowerPoint and PDF",
            ]}
          />
        </SlideContent>
        <Notes>Spend the most time on the export story.</Notes>
      </Slide>

      <Slide id="end" className="bg-gradient-to-br from-purple-900 to-slate-900">
        <SlideContent layout="centered">
          <Heading level={2} align="center">
            Questions?
          </Heading>
        </SlideContent>
      </Slide>
    </Presentation>
  );
}

3. Run it

npm run dev

Open http://localhost:5173. Arrow keys or space move between slides; F is fullscreen, O is the overview grid.

Because id is set on each slide, the URL tracks position — #/slide/features links straight to the second slide.

4. Build

npm run build     # → dist/
npm run preview   # serve it

dist/ is a static site. Any host will serve it.

Things worth knowing early

  • <Notes> never renders on the slide. It feeds the presenter view.
  • SlideContent handles vertical rhythm. Its layout prop is "default" | "centered" | "top" | "bottom" | "fill" | "between" — a different set from Slide’s own layout prop, which is "default" | "center" | "two-column" | "image" | "title".
  • Tailwind classes work everywhere. className on any Narro component is merged, not replaced.

Next

IntroductionWhat is Narro, and should I be writing markdown or React?
InstallationWhat do I install, and what does the project look like afterwards?
First DeckWhat does a working React deck look like, end to end?
Markdown ModeHow do I split a slide, style one word, or reveal a line — without leaving the markdown file?
Writing AI PromptsWhat do I tell an AI so the deck it writes actually builds?
Rules for AI AgentsWhat do I paste into my repo so an agent stops writing decks that build wrong?
React APIWhich component or hook do I import, and what does it take?
CLIWhich command do I run, and what are its flags?
Markdown APIHow do I read, edit, or validate a deck file from my own code instead of by hand?
Component ReferenceWhat props does this component take, and which package do I import it from?
Verifying a deckHow do I know my deck is actually correct?
AnimationHow do I reveal a list one line at a time, or move between slides with something other than a cut?
NavigationHow does the audience move through the deck, and how do I present it?
Canvas & PositioningHow do I put something at an exact position instead of in the flow?
Images & MediaHow do I use an image as a background, tint it, or embed a video?
ArchitectureWhich package owns what, and why is the seam where it is?
Transform ModeHow do I zoom and pan across one big canvas instead of cutting between slides?
Import & ExportHow do I get this deck out as PPTX, PDF, or one file I can email?
AI IntegrationHow do I wire an AI assistant up to Narro so it can write and build decks?
ThemingHow do I change the colours, fonts, and overall look of a deck?
Deck TemplatesHow do I define one house style with named layouts my slides can reference, like a PowerPoint master?
TroubleshootingSomething is wrong with my deck. What is it, and how do I fix it?
LimitationsWhat can't Narro do, and what do I do instead?