---
name: "@slide-cn"
slug: "slide-cn"
description: "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."
category: "Niche/single-purpose"
tags: ["backgrounds", "blocks", "cards", "components", "design-system", "developer-tools", "loaders", "media", "navigation", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "prithvi-rajan-222"
website: "https://slide-cn.com"
github: "https://github.com/prithvi-rajan-222/slide-cn"
registry: "https://slide-cn.com/r/registry.json"
pro: false
pro_url: null
github_stars: 21
component_count: 20
generated_at: "2026-07-28T08:59:05.895Z"
---

# @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.

## Links

- Website: https://slide-cn.com
- GitHub: https://github.com/prithvi-rajan-222/slide-cn
- Registry JSON: https://slide-cn.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/slide-cn
- This file: https://sh4dcn.vercel.app/md/slide-cn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://slide-cn.com/r/registry.json
pnpm dlx shadcn@latest add https://slide-cn.com/r/registry.json
bunx shadcn@latest add https://slide-cn.com/r/registry.json
# clone the source repo
git clone https://github.com/prithvi-rajan-222/slide-cn.git
# fetch the raw registry index
curl -s https://slide-cn.com/r/registry.json
```

## Components (20)

| name | type | description | install |
| --- | --- | --- | --- |
| slide-cn-default | registry:lib | Installs the recommended Slide-CN layouts and components. | `npx shadcn@latest add https://slide-cn.com/r/slide-cn-default.json` |
| deck | registry: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 | registry: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 | registry:component | Navigation for your slides | `npx shadcn@latest add https://slide-cn.com/r/slide-nav.json` |
| slide-footer | registry:component | Footer for your slides | `npx shadcn@latest add https://slide-cn.com/r/slide-footer.json` |
| navigation-toast | registry:component | Toast overlay that shows navigation hints on first load | `npx shadcn@latest add https://slide-cn.com/r/navigation-toast.json` |
| slide | registry:component | Basic slide component | `npx shadcn@latest add https://slide-cn.com/r/slide.json` |
| horizontal-split | registry:component | A slide layout with two columns split horizontally | `npx shadcn@latest add https://slide-cn.com/r/horizontal-split.json` |
| vertical-split | registry:component | A slide layout with two rows split vertically | `npx shadcn@latest add https://slide-cn.com/r/vertical-split.json` |
| title-slide | registry:component | Set of components to easily create a title slide | `npx shadcn@latest add https://slide-cn.com/r/title-slide.json` |
| slide-image | registry: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 | registry:component | A callout component for highlighting information | `npx shadcn@latest add https://slide-cn.com/r/callout.json` |
| code-block | registry:component | A code block component with syntax highlighting | `npx shadcn@latest add https://slide-cn.com/r/code-block.json` |
| gradient-linear | registry: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` |
| gradient-radial | registry: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 | registry:component | A component that reveals its content on click | `npx shadcn@latest add https://slide-cn.com/r/reveal.json` |
| timeline | registry: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 | registry: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 | registry: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 | registry:theme | A warm green-amber earth tone theme for Slide-CN presentations. | `npx shadcn@latest add https://slide-cn.com/r/earth-theme.json` |

## For AI agents

```text
You are adding components from @slide-cn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/slide-cn.md) for the component list.
2. Fetch the machine-readable index: https://slide-cn.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: slide-cn).
```