Full-page, production-ready UI compositions for SaaS. Built with shadcn/ui and Tailwind CSS. Not individual components — complete pages with polished interactions.
Browse and preview at scenes.so.
Add the Scenes registry to your components.json:
{
"registries": {
"@scenes": "https://scenes.so/r/{name}.json"
}
}npx shadcn@latest add @scenes/dashboard-01The scene installs to components/scenes/<category>/<scene>.tsx in your project.
| Scene | Description |
|---|---|
dashboard-01 |
Complete SaaS dashboard with collapsible sidebar, stat cards, revenue chart, and orders table |
| Scene | Description |
|---|---|
auth-01 |
Branded split-screen login and signup with social OAuth, magic link, and animated state transitions |
| Scene | Description |
|---|---|
settings-01 |
Full settings page with tabs for profile, notifications, billing, and danger zone |
- React 18+
- Tailwind CSS v4
- shadcn/ui initialized in your project
npm install
npm run dev| Command | Description |
|---|---|
npm run dev |
Start dev server with Turbopack |
npm run build |
Generate registry + production build |
npm run generate:registry |
Generate registry JSON files |
npm run validate:registry |
Validate all scenes and registry |
npm run validate:scene <id> |
Validate a single scene |
See CONTRIBUTING.md for guidelines on adding new scenes.