Create beautiful presentations using code

Build slides as React components, install them through the shadcn registry, and present interactive decks straight from your app.

pnpm dlx shadcn@latest add @slide-cn/slide-cn-default

Why Slide-CN?

Presentations as code, for everyone.

Use arrow keys to navigate

←→

Everything you need to present like a developer

Slide-CN gives you the tools to build presentations the way you build software.

Code-First

Write slides as React components with full TypeScript support.

Version Control

Track changes with Git, review with PRs, deploy with CI/CD.

Component Library

Pre-built layouts: title slides, split views, code blocks, reveals.

Themeable

Built on Shadcn and Tailwind. Your design system, your slides.

Interactive

Add animations, progressive reveals, and live components.

One Command Install

Add components via the Shadcn CLI registry.

Slides are just React components

Write JSX. Get a presentation. The demo above is built with the code below.

page.tsx

import { Deck } from "@/components/ui/slide-cn/deck";
import { Slide } from "@/components/ui/slide-cn/slide";
import { TitleSlide } from "@/components/ui/slide-cn/title-slide";
import { GradientBackground }
  from "@/components/ui/slide-cn/backgrounds/dark-mode-gradient";

export default function MyDeck() {
  return (
    <Deck>
      <Slide background={<GradientBackground />}>
        <TitleSlide>
          <TitleSlide.Heading>
            Why Slide-CN?
          </TitleSlide.Heading>
          <TitleSlide.SubHeading>
            Presentations as code, for everyone.
          </TitleSlide.SubHeading>
        </TitleSlide>
      </Slide>

      <Slide>
        <h2>Built with React</h2>
        <p>Use any component you want.</p>
      </Slide>
    </Deck>
  );
}

Get started in three steps

From install to first working deck in a couple of minutes.

Install

Add the default Slide-CN preset from the shadcn registry.

pnpm dlx shadcn@latest add @slide-cn/slide-cn-default

Write

Create a deck using React components. Each slide is a component.

import { Deck } from "@/components/ui/slide-cn/deck";
import { Slide } from "@/components/ui/slide-cn/slide";
import { TitleSlide } from "@/components/ui/slide-cn/title-slide";

<Deck>
  <Slide>
    <TitleSlide>
      <TitleSlide.Heading>My Presentation</TitleSlide.Heading>
      <TitleSlide.SubHeading>Built with Slide-CN</TitleSlide.SubHeading>
    </TitleSlide>
  </Slide>
</Deck>

Present

Run your app and present directly from the browser.

pnpm dev

Create beautifulbeautiful presentations using code