📋 shadcn/ui Cheatsheet

```

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.

🎯 View Live Demo | 🧩 Explore Premium Blocks | 🖥️ Get Dashboard Template

✨ What's This?

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.

� Live Demo

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.

✨ Key Features

🔥 Complete Component Library

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

📋 Developer-Focused Tools

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

🎨 Advanced Features

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

⚡ Performance & UX

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

� Quick Start

Prerequisites

Node.js 18+
pnpm (recommended), npm, yarn, or bun

1. Clone & Install

# Clone the repository
git clone https://github.com/silicondeck/shadcn-cheatsheet.git
cd shadcn-cheatsheet

# Install dependencies
pnpm install

# Start development server
pnpm dev

2. Access the Application

Open http://localhost:3000 in your browser, or visit the live demo at https://shadcnstore.com/cheatsheet.

3. Build for Production

# Build for production
pnpm build

# Start production server
pnpm start

📦 Available Components

Key Components Included

✅ 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!

🛠️ Development Commands

# 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

📁 Project Structure

📁 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

🛠️ Tech Stack

Core Framework

Next.js 15 - React framework with App Router
React 19 - Latest React with concurrent features
TypeScript - Full type safety

UI & Styling

shadcn/ui - Component library
Radix UI - Accessible primitives
Tailwind CSS v4 - Utility-first styling
Lucide React - Beautiful icons

� Usage & Navigation

Component Cards

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

Package Manager Integration

Switch between package managers using the tab interface:

# npm, # yarn, # pnpm, # bun

Search & Navigation

Global Search - Press Ctrl+K or CMD+k to 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

🌟 Why Use This Cheatsheet?

🚀 Speed Up Development

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

📚 Comprehensive Coverage

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

🎯 Developer-Focused

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

🚀 Take It Further with ShadcnStore

This free Cheatsheet is part of the ShadcnStore ecosystem! Discover more resources to accelerate your development:

🎁 Available Now

🖥️ Opensource Dashboard Template

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

🧩 Premium UI Blocks

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

🔜 Coming Soon

Landing Page Collection - Business-ready marketing templates
E-commerce Templates - Complete online store solutions
SaaS Starter Kits - Full-stack application templates

💡 Perfect For

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.

🤝 Contributing

We welcome contributions from the community! Here's how you can help make this Cheatsheet even better:

Ways to Contribute

🐛 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!

Getting Started

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

Development Guidelines

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

Component Guidelines

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

📄 License

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.

🙏 Credits & Acknowledgments

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

📞 Support & Community

Get Help

🐛 Bug Reports - GitHub Issues
💬 Feature Requests - GitHub Discussions

Stay Connected

🌐 Website - ShadcnStore.com
🐦 Twitter - @shadcnstore

Found This Helpful?

⭐ 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

⭐ Star this repo if it helped you

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

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.github		.github
app		app
components		components
config		config
data		data
hooks		hooks
lib		lib
public		public
registry/default/examples		registry/default/examples
types		types
utils		utils
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
prettier.config.cjs		prettier.config.cjs
tsconfig.json		tsconfig.json

License

silicondeck/shadcn-cheatsheet

Folders and files

Latest commit

History

Repository files navigation