Installation

Slide-CN is distributed through the shadcn registry, so the fastest path is:

1. Set up shadcn/ui in your project
2. Install the Slide-CN preset
3. Render a deck in any page or route

Quick Start

Install the default preset, which includes the core deck primitives plus the recommended layouts and content components:

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

npx shadcn@latest add @slide-cn/slide-cn-default

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

bunx --bun shadcn@latest add @slide-cn/slide-cn-default

Then create a page and render your first deck:

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";

export default function PresentationPage() {
  return (
    <div className="fixed inset-0">
      <Deck>
        <Slide>
          <TitleSlide>
            <TitleSlide.Heading>Welcome to Slide-CN</TitleSlide.Heading>
            <TitleSlide.SubHeading>
              Presentations built with real React components
            </TitleSlide.SubHeading>
            <TitleSlide.Meta>Arrow keys to navigate</TitleSlide.Meta>
          </TitleSlide>
        </Slide>
      </Deck>
    </div>
  );
}

Start your app with pnpm dev, open the route, and you have a working presentation.

What You Get

• Deck for keyboard and swipe navigation
• Slide for individual slides
• Layout primitives like TitleSlide, HorizontalSplit, and VerticalSplit
• Content components like Reveal, CodeBlock, SlideImage, and Callout

Compatibility

Slide-CN works best in React + TypeScript projects that already use shadcn/ui. The docs and examples are built around Next.js, but the components themselves are regular React components.