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:
License
Documentation content © shadcn. Used for educational purposes under fair use.
Skill package © OpenClaw Community, MIT License.
1---2name: shadcn-ui-33description: Complete shadcn/ui documentation. Beautifully designed components built with Radix UI and Tailwind CSS. Copy-paste into your apps. Covers installation, components, theming, forms, charts, and framework integrations.4---5
6# shadcn/ui Documentation
7
8Complete shadcn/ui documentation extracted from the official shadcn/ui repository.
9
10## Contents
11
12This skill includes **201 MDX files** (1.4MB) covering:
13
14### Getting Started
15- **Installation** - Setup for Next.js, Vite, Remix, Astro, Laravel, Gatsby, React Router, Tanstack Router
16- **CLI** - shadcn/ui CLI commands and usage
17- **Components JSON** - Configuration and customization
18- **Theming** - CSS variables, dark mode, theme customization
19- **Typography** - Font setup and typography utilities
20
21### Components (50+)
22- **Accordion** - Collapsible content sections
23- **Alert** - Contextual feedback messages
24- **Avatar** - User profile images
25- **Badge** - Status indicators
26- **Button** - Interactive buttons with variants
27- **Calendar** - Date picker and calendar views
28- **Card** - Content containers
29- **Checkbox** - Selection controls
30- **Combobox** - Searchable select
31- **Command** - Command palette
32- **Context Menu** - Right-click menus
33- **Data Table** - Sortable, filterable tables
34- **Date Picker** - Date selection
35- **Dialog** - Modal dialogs
36- **Drawer** - Slide-out panels
37- **Dropdown Menu** - Action menus
38- **Form** - Form components with validation
39- **Hover Card** - Hoverable content cards
40- **Input** - Text inputs
41- **Label** - Form labels
42- **Menubar** - Application menu bar
43- **Navigation Menu** - Site navigation
44- **Pagination** - Page navigation
45- **Popover** - Floating content
46- **Progress** - Progress indicators
47- **Radio Group** - Radio button groups
48- **Resizable** - Resizable panels
49- **Scroll Area** - Custom scrollbars
50- **Select** - Dropdown selects
51- **Separator** - Visual dividers
52- **Sheet** - Slide-over panels
53- **Skeleton** - Loading placeholders
54- **Slider** - Range inputs
55- **Switch** - Toggle switches
56- **Table** - Data tables
57- **Tabs** - Tabbed interfaces
58- **Textarea** - Multi-line text inputs
59- **Toast** - Toast notifications
60- **Toggle** - Toggle buttons
61- **Tooltip** - Contextual hints
62- **And many more...**
63
64### Advanced Features
65- **Charts** - Recharts integration (Area, Bar, Line, Pie, Radar, Radial)
66- **Forms** - React Hook Form, Tanstack Form, Zod integration
67- **Data Tables** - Advanced table patterns
68- **Dark Mode** - Theme switching
69- **Figma** - Design system integration
70- **Icons** - Icon libraries (Lucide, Radix Icons)
71
72### Framework Integration
73- **Next.js** - App Router, Pages Router
74- **Vite** - React + Vite setup
75- **Remix** - Remix integration
76- **Astro** - Astro integration
77- **Laravel** - Inertia.js + Laravel
78- **Gatsby** - Gatsby integration
79- **React Router** - React Router v7
80- **Tanstack Router** - Tanstack Router integration
81
82### Registry & Distribution
83- **Registry** - Component registry system
84- **Custom Registry** - Build your own component registry
85- **Namespace** - Custom namespaces
86- **Authentication** - Registry authentication
87- **MCP** - Model Context Protocol integration
88
89### Developer Resources
90- **Changelog** - Version history and updates
91- **About** - Project philosophy and principles
92- **FAQ** - Frequently asked questions
93- **CLI Reference** - Complete CLI documentation
94- **RTL Support** - Right-to-left language support
95
96## Usage
97
98This skill provides comprehensive documentation for:
99
1001. **Component Installation** - Adding components to your project
1012. **Customization** - Theming, styling, and variants
1023. **Framework Setup** - Integration with Next.js, Vite, Remix, etc.
1034. **Forms & Validation** - React Hook Form + Zod patterns
1045. **Charts & Data** - Recharts integration
1056. **Design System** - Building custom design systems
1067. **Accessibility** - WCAG-compliant components
107
108## Philosophy
109
110shadcn/ui is **not a component library**. It's a collection of re-usable components that you can copy and paste into your apps.
111
112**Key Benefits:**
113- **Own the code** - Components are copied to your project
114- **Customizable** - Full control over styling and behavior
115- **Accessible** - Built on Radix UI primitives
116- **Themeable** - CSS variables for easy theming
117- **Framework agnostic** - Works with any React framework
118
119## File Structure
120
121```
122docs/
123├── installation/ # Framework-specific setup guides
124├── components/ # Component documentation (50+)
125├── charts/ # Chart components (Recharts)
126├── forms/ # Form integration guides
127├── cli.mdx # CLI reference
128├── components-json.mdx # Configuration reference
129├── theming.mdx # Theming guide
130├── dark-mode.mdx # Dark mode implementation
131├── typography.mdx # Typography setup
132├── changelog.mdx # Version history
133├── about.mdx # Project philosophy
134├── figma.mdx # Figma integration
135└── registry/ # Registry documentation
136```
137
138## Documentation Source
139
140Official shadcn/ui documentation extracted from:
141- Repository: https://github.com/shadcn-ui/ui
142- Website: https://ui.shadcn.com
143- Last Updated: 2026-02-07
144
145## License
146
147Documentation content © shadcn. Used for educational purposes under fair use.
148Skill package © OpenClaw Community, MIT License.
dvcrn