# First Deck

> Build a three-slide React deck end to end

This walks through a React deck. If you want the markdown path instead, see
[Markdown mode](/docs/markdown-mode) — it is shorter.

## 1. Scaffold

```bash
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`.

```tsx
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

```bash
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

```bash
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
  <!-- generated:type:SlideContent.layout -->"default" | "centered" | "top" | "bottom" | "fill" | "between"<!-- /generated:type:SlideContent.layout -->
  — a different set from `Slide`'s own `layout` prop, which is
  <!-- generated:union:LayoutType -->"default" | "center" | "two-column" | "image" | "title"<!-- /generated:union:LayoutType -->.
- **Tailwind classes work everywhere.** `className` on any Narro component is
  merged, not replaced.

## Next

- [Markdown mode](/docs/markdown-mode) — the same deck in one `.md` file
- [Component reference](/docs/components) — everything you can import
- [Animation](/docs/animation) — fragments and progressive reveals