Slide-CN

Create beautiful presentations using code

Build slides as React components. Version control with Git, style with Tailwind, and present from your Next.js app.

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

Why Slide-CN?

Presentations as code, for everyone.

Slide 1 / 5
Swipe
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 zero to presenting in under a minute.

1

Install

Add Slide-CN to your Next.js project with a single command.

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

Write

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

<Deck>
  <Slide>
    <SlideTitle>
      My Presentation
    </SlideTitle>
  </Slide>
</Deck>
3

Present

Run your Next.js app and present directly from the browser.

pnpm dev

Ready to ditch the drag-and-drop?

Start building presentations the way you build software.

Get StartedGitHub