Open-source playground primitives for shadcn/ui

Interactive code playground components for shadcn/ui

Build embedded editors, live previews, file trees, consoles, and error overlays with copy-pasteable shadcn components.

counter-demo

app/page.tsx

TSX

Preview

Console

10:00:01[next]Dev server ready on http://localhost:3000

10:00:02[compiler]Compiling / ...

10:00:03[compiler]Compiled successfully in 412ms

10:00:05[hmr]Fast Refresh had to perform a full reload.

10:00:08[runtime]TypeError: Cannot read properties of undefined (reading 'count')

Multi-file CodeEditor

Tabs, syntax highlighting, dirty state, format and copy actions — ready to drop into docs or dashboards.

Live PreviewFrame

Responsive viewport switching, refresh controls, loading and error states with a polished runtime overlay.

Console & Install Logs

Developer-grade console panel and terminal-style package install output for realistic playground UX.

Install from the registry

Add individual playground components to your project with the shadcn CLI.

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/code-editor.json

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/preview-frame.json

bunx --bun shadcn@latest add https://shadcn-sandbox.vercel.app/r/resizable-ide-layout.json

Features