--- name: "@slidecn" slug: "slidecn" description: "Beautiful presentations, made simple. Ready to use, customizable presentation components for React." category: "Animated components" tags: ["animation", "blocks", "cards", "media", "theming"] framework: "react" license: "MIT" author: "shadcn-labs" website: "https://slidecn.vercel.app" github: "https://github.com/shadcn-labs/slidecn" registry: "https://slidecn.vercel.app/r/registry.json" pro: false pro_url: null github_stars: 5 component_count: 26 generated_at: "2026-09-21T01:50:16.753Z" --- # @slidecn Beautiful presentations, made simple. Ready to use, customizable presentation components for React. ## Links - Website: https://slidecn.vercel.app - GitHub: https://github.com/shadcn-labs/slidecn - Registry JSON: https://slidecn.vercel.app/r/registry.json - Directory page: https://sh4dcn.vercel.app/registry/slidecn - This file: https://sh4dcn.vercel.app/md/slidecn.md ## Install ```sh # add the whole registry (shadcn CLI) npx shadcn@latest add https://slidecn.vercel.app/r/registry.json pnpm dlx shadcn@latest add https://slidecn.vercel.app/r/registry.json bunx shadcn@latest add https://slidecn.vercel.app/r/registry.json # clone the source repo git clone https://github.com/shadcn-labs/slidecn.git # fetch the raw registry index curl -s https://slidecn.vercel.app/r/registry.json ``` ## Components (26) | name | type | description | install | | --- | --- | --- | --- | | title-slide | registry:ui | A presentation title slide with eyebrow, title, subtitle, author, and date. | `npx shadcn@latest add https://slidecn.vercel.app/r/title-slide.json` | | section-slide | registry:ui | A chapter divider slide with label and title. | `npx shadcn@latest add https://slidecn.vercel.app/r/section-slide.json` | | content-slide | registry:ui | A general purpose content slide with multiple layout options. | `npx shadcn@latest add https://slidecn.vercel.app/r/content-slide.json` | | split-slide | registry:ui | A two-column split layout slide with configurable ratio. | `npx shadcn@latest add https://slidecn.vercel.app/r/split-slide.json` | | image-slide | registry:ui | A slide for displaying images with stretch, contained, or full-bleed modes. | `npx shadcn@latest add https://slidecn.vercel.app/r/image-slide.json` | | stat-slide | registry:ui | A statistics-focused slide with single, row, or grid layouts. | `npx shadcn@latest add https://slidecn.vercel.app/r/stat-slide.json` | | quote-slide | registry:ui | A quote/citation slide with minimal, large, and accent variants. | `npx shadcn@latest add https://slidecn.vercel.app/r/quote-slide.json` | | list-slide | registry:ui | An ordered or unordered list slide with optional fragment animations. | `npx shadcn@latest add https://slidecn.vercel.app/r/list-slide.json` | | comparison-slide | registry:ui | A side-by-side comparison slide with columns or table variant. | `npx shadcn@latest add https://slidecn.vercel.app/r/comparison-slide.json` | | timeline-slide | registry:ui | A timeline slide with horizontal or vertical direction and optional animations. | `npx shadcn@latest add https://slidecn.vercel.app/r/timeline-slide.json` | | team-slide | registry:ui | A team member showcase slide with avatars, roles, and bios. | `npx shadcn@latest add https://slidecn.vercel.app/r/team-slide.json` | | code-block | registry:ui | A syntax-highlighted code block with filename, line numbers, and copy button. | `npx shadcn@latest add https://slidecn.vercel.app/r/code-block.json` | | fragment-list | registry:ui | A list wrapper with fragment-based reveal animations on each item. | `npx shadcn@latest add https://slidecn.vercel.app/r/fragment-list.json` | | fragment-reveal | registry:ui | Steps through children one by one using fragment animations. | `npx shadcn@latest add https://slidecn.vercel.app/r/fragment-reveal.json` | | fit-text | registry:ui | Automatically resizes text to fill the available space using r-fit-text. | `npx shadcn@latest add https://slidecn.vercel.app/r/fit-text.json` | | notes | registry:ui | Speaker notes for reveal.js presentations. | `npx shadcn@latest add https://slidecn.vercel.app/r/notes.json` | | auto-animate-pair | registry:ui | Two consecutive slides with auto-animate enabled for smooth transitions between states. | `npx shadcn@latest add https://slidecn.vercel.app/r/auto-animate-pair.json` | | stack-reveal | registry:ui | A thin typed wrapper over the reveal.js Stack component. | `npx shadcn@latest add https://slidecn.vercel.app/r/stack-reveal.json` | | pitch-deck | registry:block | A 7-slide pitch deck template: problem, solution, how it works, traction, team, and CTA. | `npx shadcn@latest add https://slidecn.vercel.app/r/pitch-deck.json` | | tech-talk | registry:block | An 8-slide technical talk template with code examples, auto-animate transitions, and benchmark results. | `npx shadcn@latest add https://slidecn.vercel.app/r/tech-talk.json` | | product-demo | registry:block | A 6-slide product demo template: features, screenshot, comparison, metrics, and CTA. | `npx shadcn@latest add https://slidecn.vercel.app/r/product-demo.json` | | weekly-report | registry:block | A 5-slide weekly report template: KPIs, timeline, wins/blockers, and next week plan. | `npx shadcn@latest add https://slidecn.vercel.app/r/weekly-report.json` | | theme-default | registry:file | The default slidecn theme with light colors and neutral tones. | `npx shadcn@latest add https://slidecn.vercel.app/r/theme-default.json` | | theme-dark | registry:file | A dark theme for slidecn presentations. | `npx shadcn@latest add https://slidecn.vercel.app/r/theme-dark.json` | | theme-minimal | registry:file | A minimal theme with larger base font size and tight letter-spacing. | `npx shadcn@latest add https://slidecn.vercel.app/r/theme-minimal.json` | | theme-brand | registry:file | A brandable theme template with customizable brand color variables. | `npx shadcn@latest add https://slidecn.vercel.app/r/theme-brand.json` | ## For AI agents ```text You are adding components from @slidecn to a shadcn-compatible project. 1. Read this file (https://sh4dcn.vercel.app/md/slidecn.md) for the component list. 2. Fetch the machine-readable index: https://slidecn.vercel.app/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: slidecn). ```