Interactive Cheatsheet for shadcn/ui components with live previews, copy-paste ready code examples, and comprehensive documentation for 45 components.
🚀 Free & Open Source by ShadcnStore - Your gateway to premium UI components, dashboards, and templates.
The shadcn/ui Cheatsheet is the most comprehensive, interactive reference guide for shadcn/ui components available. Built by developers, for developers, it provides instant access to live component previews, copy-paste ready code snippets, and complete documentation for every shadcn/ui component.
Whether you're just getting started with shadcn/ui or you're a seasoned developer looking for quick reference, this Cheatsheet accelerates your development workflow and helps you build beautiful, accessible interfaces faster.
Experience the Cheatsheet in action:
- 🔗 Interactive Cheatsheet - Complete component reference with live previews
Note: Every component includes live previews, usage examples, installation commands, and copy-paste ready code snippets.
- 45 Components - Every shadcn/ui component covered
- Live Previews - Interactive component demonstrations
- Multiple Variants - All component variations and examples
- Real-time Updates - Always up-to-date with latest shadcn/ui releases
- Copy-Paste Ready - One-click code copying for components and examples
- Installation Commands - Package manager specific install commands (npm, pnpm, yarn, bun)
- Import Statements - Ready-to-use import statements
- Usage Examples - Practical implementation examples
- Theme Customizer - Real-time theme switching and preview
- Smart Search - Find components instantly with fuzzy search
- Category Filtering - Browse by component categories
- Keyboard Navigation - Full keyboard accessibility
- URL Bookmarking - Direct links to specific components
- Lightning Fast - Built with Next.js 15 & Turbopack
- Responsive Design - Mobile-first approach
- Dark/Light Mode - Beautiful theme switching
- Smooth Animations - Polished user experience
- Scroll Position Memory - Maintains scroll position during navigation
- Node.js 18+
- pnpm (recommended), npm, yarn, or bun
# Clone the repository
git clone https://github.com/silicondeck/shadcn-cheatsheet.git
cd shadcn-cheatsheet
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000 in your browser, or visit the live demo at https://shadcnstore.com/cheatsheet.
# Build for production
pnpm build
# Start production server
pnpm start- ✅ Button - Buttons with multiple variants and sizes
- ✅ Input - Text inputs with validation states
- ✅ Select - Dropdown select components
- ✅ Dialog - Modal dialogs
- ✅ Sheet - Side panels and drawers
- ✅ Table - Advanced data tables
- ✅ Card - Content cards with headers and footers
- ✅ Navigation Menu - Complex navigation with dropdowns
- ✅ Calendar - Date picker calendars
- ✅ Accordion - Collapsible content sections
- ✅ Sonner Toast - Notification toasts
And 34+ more components covering all shadcn/ui functionality!
# Start development server with hot reload
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm start
# Run linting
pnpm lint
# Run linting with auto-fix
pnpm lint --fix
# Type checking
pnpm type-check📁 shadcn-cheatsheet/
├── 📁 app/ # Next.js App Router
│ ├── 📄 layout.tsx # Root layout
│ ├── 📄 page.tsx # Homepage
│ ├── 📄 globals.css # Global styles
│ └── 📁 api/ # API routes
│ └── 📁 registry/ # Component registry API
├── 📁 components/ # React components
│ ├── 📁 ui/ # shadcn/ui components
│ ├── 📁 layout/ # Layout components
│ ├── 📁 cards/ # Component preview cards
│ ├── 📁 search/ # Search functionality
│ └── 📁 theme-customizer/ # Theme customization
├── 📁 lib/ # Utility libraries
│ ├── 📄 search.ts # Fuzzy search logic
│ ├── 📄 registry.ts # Component registry
│ └── 📄 utils.ts # Utility functions
├── 📁 data/ # Static data
│ └── 📄 components-simple.ts # Component definitions
├── 📁 registry/ # Component examples
│ └── 📁 default/
│ └── 📁 examples/ # Component example files
├── 📁 hooks/ # Custom React hooks
├── 📁 types/ # TypeScript definitions
└── 📁 public/ # Static assets
- Next.js 15 - React framework with App Router
- React 19 - Latest React with concurrent features
- TypeScript - Full type safety
- shadcn/ui - Component library
- Radix UI - Accessible primitives
- Tailwind CSS v4 - Utility-first styling
- Lucide React - Beautiful icons
Each component card displays:
- Component name and description
- Installation command for selected package manager
- Code variants with individual copy buttons
- Dependencies and documentation links
- Expand/collapse for detailed view
Switch between package managers using the tab interface:
# npm, # yarn, # pnpm, # bun- Global Search - Press
Ctrl+KorCMD+kto open command palette - Category Filters - Click category badges to filter components
- Component Preview - Click any component for live preview
- Keyboard Navigation - Use arrow keys in preview mode
- Theme Customizer - Real-time theme switching and customization
- Instant Reference - No more digging through documentation
- Copy-Paste Ready - Get code snippets immediately
- Live Previews - See exactly how components look and behave
- Complete Examples - Real-world usage patterns
- Every Component - Complete shadcn/ui library coverage
- All Variants - Every possible component variation
- Up-to-Date - Always current with latest releases
- Best Practices - Proper usage examples and patterns
- Keyboard Navigation - Full accessibility support
- Search Everything - Find any component instantly
- Mobile Ready - Works perfectly on all devices
- Performance Optimized - Fast loading and smooth interactions
This free Cheatsheet is part of the ShadcnStore ecosystem! Discover more resources to accelerate your development:
Complete admin dashboard with 30+ pages, built with shadcn/ui:
- 2 Dashboard Variants - Overview & Analytics dashboards
- App Demos - Mail, Tasks, Chat, Calendar applications
- Authentication Pages - Login, signup, password recovery
- Settings Pages - Account, billing, appearance management
- Live Theme Customizer - Real-time theme editing with tweakcn
- Available in Vite & Next.js - Choose your preferred framework
150+ production-ready UI blocks for rapid development:
- Application Blocks - Dashboard components and layouts
- Marketing Blocks - Landing page sections and CTAs
- E-commerce Blocks - Shopping cart, product cards, checkout flows
- Free Blocks - No-cost starter components
- Copy-Paste Ready - Drop into any shadcn/ui project
- Landing Page Collection - Business-ready marketing templates
- E-commerce Templates - Complete online store solutions
- SaaS Starter Kits - Full-stack application templates
- SaaS Applications - Complete dashboard and admin solutions
- Marketing Websites - Beautiful, conversion-optimized landing pages
- E-commerce Sites - Professional online store interfaces
- Internal Tools - Admin panels and business applications
🎯 Explore ShadcnStore - Premium blocks, dashboards and templates for modern web applications.
We welcome contributions from the community! Here's how you can help make this Cheatsheet even better:
- 🐛 Report Bugs - Found an issue? Create an issue
- 💡 Suggest Features - Have ideas for improvements? We'd love to hear them!
- 🔧 Submit Pull Requests - Fix bugs, add features, or improve documentation
- ⭐ Star the Repository - Show your support and help others discover this project!
- Fork the repository - Click the fork button at the top of this page
- Clone your fork -
git clone https://github.com/yourusername/shadcn-cheatsheet.git - Create a feature branch -
git checkout -b feature/amazing-feature - Make your changes - Add your improvements
- Test thoroughly - Ensure everything works correctly
- Commit your changes -
git commit -m 'Add amazing feature' - Push to your branch -
git push origin feature/amazing-feature - Open a Pull Request - Submit your changes for review
- Use TypeScript for all new code
- Follow the existing code style and formatting
- Add type definitions for new components or props
- Test your changes across different screen sizes
- Write clear, descriptive commit messages
- Update documentation for new features
When adding new components:
- Follow the existing component structure in
data/components-simple.ts - Create example files in
registry/default/examples/ - Include multiple variants where applicable
- Add proper TypeScript types
- Test accessibility and keyboard navigation
This project is licensed under the MIT License - see the LICENSE file for details.
You are free to:
- ✅ Use for personal and commercial projects
- ✅ Modify and distribute the code
- ✅ Include in your own projects
- ✅ Create derivative works
Attribution to ShadcnStore is appreciated but not required.
This Cheatsheet is built on the foundation of incredible open-source projects and the amazing work of their maintainers:
- shadcn - For creating the amazing shadcn/ui component library
- shadcn/ui - Beautiful and accessible React components
- Radix UI - Low-level accessible UI primitives
- Tailwind CSS - Utility-first CSS framework
- Next.js - The React framework for production
- Vercel - Platform for frontend frameworks and static sites
- Lucide - Beautiful & consistent icon library
- 🐛 Bug Reports - GitHub Issues
- 💬 Feature Requests - GitHub Discussions
- 🌐 Website - ShadcnStore.com
- 🐦 Twitter - @shadcnstore
- ⭐ Star this repository to show your support
- 🔄 Share with your team and fellow developers
- 🐦 Tweet about it to help others discover this resource
- ❤️ Sponsor the project to help us maintain and improve it
Every star helps more developers discover this resource
A free & open-source project by ShadcnStore - Premium UI components, dashboards and templates for modern web development.
Made with ❤️ for the React and shadcn/ui community
