@slide-cn

A code-first presentation framework for React that lets developers build slide decks as JSX components installable via the shadcn registry. Provides pre-built slide layouts (title slides, split views, code blocks, progressive reveals), built-in keyboard/swipe navigation, Tailwind CSS and shadcn/ui theming, TypeScript support, and Git-trackable deck source. Install with a single shadcn CLI command. Free and open-source. Use for: building developer-facing presentations or pitch decks directly inside a React/Next.js codebase, with version control and CI/CD integration instead of PowerPoint or Keynote.

20 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://slide-cn.com/r/registry.json

pnpm pnpm dlx shadcn@latest add https://slide-cn.com/r/registry.json

bun bunx shadcn@latest add https://slide-cn.com/r/registry.json

fetch registry curl -s https://slide-cn.com/r/registry.json

Components

20 total

Slide-CN Default Preset lib

Installs the recommended Slide-CN layouts and components.

npx shadcn@latest add https://slide-cn.com/r/slide-cn-default.json

Deck component

A Deck component that is the core of the presentation

npx shadcn@latest add https://slide-cn.com/r/deck.json

Header with content component

A layout with a header, and some content space

npx shadcn@latest add https://slide-cn.com/r/header-with-content.json

Slide Nav component

Navigation for your slides

npx shadcn@latest add https://slide-cn.com/r/slide-nav.json

Slide footer component

Footer for your slides

npx shadcn@latest add https://slide-cn.com/r/slide-footer.json

Navigation Toast component

Toast overlay that shows navigation hints on first load

npx shadcn@latest add https://slide-cn.com/r/navigation-toast.json

Slide component

Basic slide component

npx shadcn@latest add https://slide-cn.com/r/slide.json

Horizontal split component

A slide layout with two columns split horizontally

npx shadcn@latest add https://slide-cn.com/r/horizontal-split.json

Vertical split component

A slide layout with two rows split vertically

npx shadcn@latest add https://slide-cn.com/r/vertical-split.json

Title slide component

Set of components to easily create a title slide

npx shadcn@latest add https://slide-cn.com/r/title-slide.json

Slide image component

Set of components to add an image and caption to a slide

npx shadcn@latest add https://slide-cn.com/r/slide-image.json

Callout component

A callout component for highlighting information

npx shadcn@latest add https://slide-cn.com/r/callout.json

Code block component

A code block component with syntax highlighting

npx shadcn@latest add https://slide-cn.com/r/code-block.json

Linear Gradient Background component

A full-bleed linear gradient background (top-left to bottom-right) using the slide-cn theme palette tokens.

npx shadcn@latest add https://slide-cn.com/r/gradient-linear.json

Radial Gradient Background component

A full-bleed radial gradient background emanating from the center using the slide-cn theme palette tokens (background, background-2, background-3).

npx shadcn@latest add https://slide-cn.com/r/gradient-radial.json

Reveal component

A component that reveals its content on click

npx shadcn@latest add https://slide-cn.com/r/reveal.json

Timeline component

A horizontal or vertical timeline component for displaying ordered events, steps, or milestones

npx shadcn@latest add https://slide-cn.com/r/timeline.json

Sky Theme theme

A cool blue-purple gradient theme for Slide-CN presentations.

npx shadcn@latest add https://slide-cn.com/r/sky-theme.json

Rose Theme theme

A warm red-pink gradient theme for Slide-CN presentations.

npx shadcn@latest add https://slide-cn.com/r/rose-theme.json

Earth Theme theme

A warm green-amber earth tone theme for Slide-CN presentations.

npx shadcn@latest add https://slide-cn.com/r/earth-theme.json