Playgroundcn

A live component playground for shadcn/ui — Browse, preview, edit, and experiment with shadcn/ui components in real-time.

🎬 Demo

Playgroundcn.Demo.mov

✨ Features

• 🎨 Live Preview — See components render in real-time as you edit
• 📝 Interactive Code Editor — Edit component code with dependency editing.
• 🌓 Dark Mode Support — Seamless theme switching with automatic sync
• 🌈 Multiple Theme Support - We have taken all the themes available on TweakCn and added them into our platform for you to quickly switch between themes.
• Cache Support - it is lightweight application, so remember, before you refresh that you might lose all your changes if you do refresh.

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui
• Code Editor: Sandpack
• Icons: Lucide React
• Theme: next-themes

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm/pnpm/yarn/bun

Installation

1. Clone the repository:

   git clone https://github.com/YOUR_USERNAME/playgroundcn.git
   cd playgroundcn

2. Install dependencies:

   Note: if you use npm, yarn or bun remember to delete the pnpm-lock.yaml file before running the install command.

   npm install
   # or
   pnpm install
   # or
   yarn install
   # or
   bun install

3. Run the development server:

   npm run dev

or

yarn dev

or

pnpm dev

or

bun dev

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details on how to get started.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- [shadcn/ui](https://ui.shadcn.com) for the amazing component library
- [Radix UI](https://www.radix-ui.com/) for accessible primitives
- [Sandpack](https://sandpack.codesandbox.io/) for the live code editor
- [TweakCn](https://tweakcn.com) for the amazing theme library
- [next-themes](https://github.com/pacocoursey/next-themes) for the amazing theme library
- [Lucide React](https://lucide.dev) for the amazing icon library
- [Tailwind CSS](https://tailwindcss.com) for the amazing styling library
- [TypeScript](https://www.typescriptlang.org) for the amazing type safety