Built with DECKIO
This deck ships with shadcn/ui components. The source files live in your project and you own them completely. Modify, extend, or replace any component to match your presentation's needs.
| Component | Path | What it does |
|---|---|---|
| Button | src/components/ui/button.jsx |
Variant-driven button (default, destructive, outline, secondary, ghost, link) |
| Card | src/components/ui/card.jsx |
Flexible container (Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter) |
| Badge | src/components/ui/badge.jsx |
Inline status / label badge with variants |
| Separator | src/components/ui/separator.jsx |
Horizontal / vertical divider (Radix primitive) |
| Alert | src/components/ui/alert.jsx |
Contextual alert with icon support (default, destructive) |
Plus ReactBits animation primitives: Aurora, BlurText, ShinyText, SpotlightCard, DecryptedText.
src/
├── components/
│ ├── ui/ ← shadcn/ui + ReactBits components (yours to own)
│ └── presentation/ ← deck-specific wrappers (MetricCard, SectionBadge, etc.)
├── slides/ ← one file per slide
├── lib/
│ └── utils.js ← cn() helper for class merging
└── App.jsx
deck.config.js ← slide order, theme, metadata
components.json ← shadcn CLI + ReactBits registry configuration
jsconfig.json ← @/ path alias
.vscode/mcp.json ← shadcn MCP server (pre-configured)
This project is pre-configured for MCP-powered component authoring — the recommended way
to add new components to your deck. The shadcn MCP server is already wired into
.vscode/mcp.json. Just open this project in VS Code or GitHub Codespaces and start prompting.
Ask Copilot to pull components from the official shadcn/ui registry:
| What you want | Example prompt |
|---|---|
| Add a single component | "Add the Dialog component from shadcn" |
| Add multiple at once | "Add Sheet, Tooltip, and Tabs from shadcn" |
| Explore what's available | "What shadcn components would work for a pricing comparison slide?" |
| Build with a component | "Create a slide that uses the Accordion component to show FAQ items" |
| Add form elements | "Add Input, Select, and Textarea from shadcn for a feedback form slide" |
| Add data display | "Add the Table component from shadcn for a metrics comparison" |
The ReactBits registry is configured in components.json alongside shadcn. Ask for animations:
| What you want | Example prompt |
|---|---|
| Animated backgrounds | "Add Hyperspeed from React Bits for a dramatic intro slide" |
| Text effects | "Show me all available text animations from React Bits" |
| Card effects | "Add a TiltCard from React Bits for interactive team member cards" |
| Content transitions | "Add AnimatedContent from React Bits for reveal-on-scroll sections" |
Both registries are declared in components.json. The shadcn CLI resolves them by prefix:
- No prefix → shadcn/ui registry (e.g.,
npx shadcn@latest add dialog) @react-bits/prefix → ReactBits registry (e.g.,npx shadcn@latest add @react-bits/code-block)
They share the same output directory (src/components/ui/) and the same @/ alias.
No configuration conflicts — they were designed to work together.
If you prefer the terminal over AI prompts, the CLI works identically:
# shadcn/ui components
npx shadcn@latest add dialog
npx shadcn@latest add sheet tooltip tabs
# ReactBits components
npx shadcn@latest add @react-bits/code-block
npx shadcn@latest add @react-bits/animated-contentNew components land in src/components/ui/. Import them in your slides:
import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'The @/ alias maps to src/ — configured in vite.config.js and jsconfig.json.
The MCP server is pre-configured for VS Code. For other editors:
npx shadcn@latest mcp init --client <your-client>See MCP-GUIDE.md for the full MCP authoring reference.
For a smooth ride, use Dev Containers locally or use GitHub Codespaces. That saves you from installing dependencies yourself. Once the container is up and running, the presentation starts in a simple browser session shared with GitHub Copilot and you can start editing.
If you want to run it directly on your machine:
npm install
npm run devOpen http://localhost:5173 in your browser.
Typical flow after GitHub Copilot is ready and the presentation is visible in Simple Browser:
- Ask GitHub Copilot to make the change you want.
- Let GitHub Copilot update the deck files for you.
- Review what changed.
- Look at the presentation and see the result immediately in real time, thanks to hot reload.
- If something feels off, ask GitHub Copilot to refine it and repeat.
Do not make deck changes by editing code directly unless you really need to. This project is set up so GitHub Copilot in VS Code can do most of the work for you.
Use GitHub Copilot Chat in Agent mode and describe the change you want. You can choose the model you like, but we recommend frontier models, Claude Opus 4.6 or GPT-5.3+, for the best experience.
The optimal flow is achieved with Claude Opus 4.6 in fast mode.
This repo includes custom instructions and skills. Copilot already knows what files it should touch and what files it should leave alone.
Useful skills:
deck-add-slidefor creating a new slide and wiring it intodeck.config.jsdeck-delete-slidefor removing a slide cleanlydeck-inspectfor visually checking a rendered slidedeck-port-powerpointfor rebuilding a PowerPoint or PDF deck as native DECKIO slidesdeck-validate-projectfor auditing the whole deck for consistencydeck-sketchfor turning a rough whiteboard idea into a real slide
Use prompts like these instead of editing files yourself:
Add a slide that explains the rollout phases for strategic customers.Make this slide easier to scan and easier to present.Remove the speaker invite slide.Review this deck and fix anything that looks inconsistent or broken.Create a customer case study slide that fits the style of the rest of the presentation.Create a new slide based on my sketch.Inspect the current progress, tell me what looks off, and make visual improvements.
Open GitHub Copilot CLI in this repo:
Do you prefer TUIs? This works with GitHub Copilot CLI too.
gh copilot --yolo