shadcn/ui Documentation
Complete shadcn/ui documentation extracted from the official shadcn/ui repository.
Contents
This skill includes 201 MDX files (1.4MB) covering:
Getting Started
- Installation - Setup for Next.js, Vite, Remix, Astro, Laravel, Gatsby, React Router, Tanstack Router
- CLI - shadcn/ui CLI commands and usage
- Components JSON - Configuration and customization
- Theming - CSS variables, dark mode, theme customization
- Typography - Font setup and typography utilities
Components (50+)
- Accordion - Collapsible content sections
- Alert - Contextual feedback messages
- Avatar - User profile images
- Badge - Status indicators
- Button - Interactive buttons with variants
- Calendar - Date picker and calendar views
- Card - Content containers
- Checkbox - Selection controls
- Combobox - Searchable select
- Command - Command palette
- Context Menu - Right-click menus
- Data Table - Sortable, filterable tables
- Date Picker - Date selection
- Dialog - Modal dialogs
- Drawer - Slide-out panels
- Dropdown Menu - Action menus
- Form - Form components with validation
- Hover Card - Hoverable content cards
- Input - Text inputs
- Label - Form labels
- Menubar - Application menu bar
- Navigation Menu - Site navigation
- Pagination - Page navigation
- Popover - Floating content
- Progress - Progress indicators
- Radio Group - Radio button groups
- Resizable - Resizable panels
- Scroll Area - Custom scrollbars
- Select - Dropdown selects
- Separator - Visual dividers
- Sheet - Slide-over panels
- Skeleton - Loading placeholders
- Slider - Range inputs
- Switch - Toggle switches
- Table - Data tables
- Tabs - Tabbed interfaces
- Textarea - Multi-line text inputs
- Toast - Toast notifications
- Toggle - Toggle buttons
- Tooltip - Contextual hints
- And many more...
Advanced Features
- Charts - Recharts integration (Area, Bar, Line, Pie, Radar, Radial)
- Forms - React Hook Form, Tanstack Form, Zod integration
- Data Tables - Advanced table patterns
- Dark Mode - Theme switching
- Figma - Design system integration
- Icons - Icon libraries (Lucide, Radix Icons)
Framework Integration
- Next.js - App Router, Pages Router
- Vite - React + Vite setup
- Remix - Remix integration
- Astro - Astro integration
- Laravel - Inertia.js + Laravel
- Gatsby - Gatsby integration
- React Router - React Router v7
- Tanstack Router - Tanstack Router integration
Registry & Distribution
- Registry - Component registry system
- Custom Registry - Build your own component registry
- Namespace - Custom namespaces
- Authentication - Registry authentication
- MCP - Model Context Protocol integration
Developer Resources
- Changelog - Version history and updates
- About - Project philosophy and principles
- FAQ - Frequently asked questions
- CLI Reference - Complete CLI documentation
- RTL Support - Right-to-left language support
Usage
This skill provides comprehensive documentation for:
- Component Installation - Adding components to your project
- Customization - Theming, styling, and variants
- Framework Setup - Integration with Next.js, Vite, Remix, etc.
- Forms & Validation - React Hook Form + Zod patterns
- Charts & Data - Recharts integration
- Design System - Building custom design systems
- Accessibility - WCAG-compliant components
Philosophy
shadcn/ui is not a component library. It's a collection of re-usable components that you can copy and paste into your apps.
Key Benefits:
- Own the code - Components are copied to your project
- Customizable - Full control over styling and behavior
- Accessible - Built on Radix UI primitives
- Themeable - CSS variables for easy theming
- Framework agnostic - Works with any React framework
File Structure
docs/
├── installation/ # Framework-specific setup guides
├── components/ # Component documentation (50+)
├── charts/ # Chart components (Recharts)
├── forms/ # Form integration guides
├── cli.mdx # CLI reference
├── components-json.mdx # Configuration reference
├── theming.mdx # Theming guide
├── dark-mode.mdx # Dark mode implementation
├── typography.mdx # Typography setup
├── changelog.mdx # Version history
├── about.mdx # Project philosophy
├── figma.mdx # Figma integration
└── registry/ # Registry documentation
Documentation Source
Official shadcn/ui documentation extracted from:
- Repository: https://github.com/shadcn-ui/ui
- Website: https://ui.shadcn.com
- Last Updated: 2026-02-07
License
Documentation content © shadcn. Used for educational purposes under fair use.
Skill package © OpenClaw Community, MIT License.