A modern, component-based presentation deck system built with Next.js and shadcn UI components.
shadcn/deck is a flexible presentation framework that allows you to create beautiful slide decks using React components. Perfect for:
- Technical presentations
- Product demos
- Conference talks
- Educational content
- 🧩 Component-based slides - Build presentations with reusable React components
- 🎨 Multiple slide types - Title, Code, Image, Grid, Quote, and more
- 📝 Presenter notes - Keep track of talking points for each slide
- 📱 Responsive design - Presentations look great on any device
- 🌙 Dark mode support - Presentations that work in any lighting condition
- ⌨️ Keyboard navigation - Easily move between slides
- 🖼️ Fullscreen mode - Immersive presentation experience
Requires Node.js 22.12 or later and pnpm 12.4.2 (pinned in package.json).
- Clone the repository:
git clone https://github.com/inthhq/shadcn-deck.git
cd shadcn-deck- Install dependencies:
corepack enable
pnpm install --frozen-lockfile- Start the development server:
pnpm dev- Open http://localhost:3000 to see your presentation.
To verify changes, run pnpm lint, pnpm type-check, and pnpm build.
Open Print view from the slide controls, then choose Print / save as PDF.
The preview preserves the deck's theme and exports one 16:9 slide per page.
The button waits for fonts, image decoding (including Slide.backgroundImage)
and components marked aria-busy="true". Offscreen images load eagerly. Failed
images are reported so you can check the preview before printing.
For custom asynchronous slide content, keep aria-busy="true" on its wrapper
until its content or error fallback is rendered. Use the browser's background
graphics option if your PDF print settings omit slide colours.
Slides are defined in src/presentation/router.ts. Each slide has:
- A unique ID
- A path for routing
- A component reference
- Presenter notes
- A title
Example slide definition:
{
id: '1',
path: '/1',
component: TitleSlide,
notes: 'Welcome to the presentation!',
title: 'My Awesome Presentation',
}- TitleSlide - Main title slide for your presentation
- ComponentOverviewSlide - Show component architecture
- GridSlide - Display content in a responsive grid
- CodeSlide - Share and highlight code examples
- QuoteSlide - Feature important quotes
- ImageSlide - Display images with captions
- KeyFeaturesSlide - Highlight key features or points
- FullscreenSlide - Create immersive full-screen content
- ThankYouSlide - End your presentation professionally
You can create your own slide components by adding them to the src/presentation/slides directory and importing them in the router.
MIT