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-ui3description: 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---56# shadcn/ui Documentation78Complete shadcn/ui documentation extracted from the official shadcn/ui repository.910## Contents1112This skill includes **201 MDX files** (1.4MB) covering:1314### Getting Started15- **Installation** - Setup for Next.js, Vite, Remix, Astro, Laravel, Gatsby, React Router, Tanstack Router16- **CLI** - shadcn/ui CLI commands and usage17- **Components JSON** - Configuration and customization18- **Theming** - CSS variables, dark mode, theme customization19- **Typography** - Font setup and typography utilities2021### Components (50+)22- **Accordion** - Collapsible content sections23- **Alert** - Contextual feedback messages24- **Avatar** - User profile images25- **Badge** - Status indicators26- **Button** - Interactive buttons with variants27- **Calendar** - Date picker and calendar views28- **Card** - Content containers29- **Checkbox** - Selection controls30- **Combobox** - Searchable select31- **Command** - Command palette32- **Context Menu** - Right-click menus33- **Data Table** - Sortable, filterable tables34- **Date Picker** - Date selection35- **Dialog** - Modal dialogs36- **Drawer** - Slide-out panels37- **Dropdown Menu** - Action menus38- **Form** - Form components with validation39- **Hover Card** - Hoverable content cards40- **Input** - Text inputs41- **Label** - Form labels42- **Menubar** - Application menu bar43- **Navigation Menu** - Site navigation44- **Pagination** - Page navigation45- **Popover** - Floating content46- **Progress** - Progress indicators47- **Radio Group** - Radio button groups48- **Resizable** - Resizable panels49- **Scroll Area** - Custom scrollbars50- **Select** - Dropdown selects51- **Separator** - Visual dividers52- **Sheet** - Slide-over panels53- **Skeleton** - Loading placeholders54- **Slider** - Range inputs55- **Switch** - Toggle switches56- **Table** - Data tables57- **Tabs** - Tabbed interfaces58- **Textarea** - Multi-line text inputs59- **Toast** - Toast notifications60- **Toggle** - Toggle buttons61- **Tooltip** - Contextual hints62- **And many more...**6364### Advanced Features65- **Charts** - Recharts integration (Area, Bar, Line, Pie, Radar, Radial)66- **Forms** - React Hook Form, Tanstack Form, Zod integration67- **Data Tables** - Advanced table patterns68- **Dark Mode** - Theme switching69- **Figma** - Design system integration70- **Icons** - Icon libraries (Lucide, Radix Icons)7172### Framework Integration73- **Next.js** - App Router, Pages Router74- **Vite** - React + Vite setup75- **Remix** - Remix integration76- **Astro** - Astro integration77- **Laravel** - Inertia.js + Laravel78- **Gatsby** - Gatsby integration79- **React Router** - React Router v780- **Tanstack Router** - Tanstack Router integration8182### Registry & Distribution83- **Registry** - Component registry system84- **Custom Registry** - Build your own component registry85- **Namespace** - Custom namespaces86- **Authentication** - Registry authentication87- **MCP** - Model Context Protocol integration8889### Developer Resources90- **Changelog** - Version history and updates91- **About** - Project philosophy and principles92- **FAQ** - Frequently asked questions93- **CLI Reference** - Complete CLI documentation94- **RTL Support** - Right-to-left language support9596## Usage9798This skill provides comprehensive documentation for:991001. **Component Installation** - Adding components to your project1012. **Customization** - Theming, styling, and variants1023. **Framework Setup** - Integration with Next.js, Vite, Remix, etc.1034. **Forms & Validation** - React Hook Form + Zod patterns1045. **Charts & Data** - Recharts integration1056. **Design System** - Building custom design systems1067. **Accessibility** - WCAG-compliant components107108## Philosophy109110shadcn/ui is **not a component library**. It's a collection of re-usable components that you can copy and paste into your apps.111112**Key Benefits:**113- **Own the code** - Components are copied to your project114- **Customizable** - Full control over styling and behavior115- **Accessible** - Built on Radix UI primitives116- **Themeable** - CSS variables for easy theming117- **Framework agnostic** - Works with any React framework118119## File Structure120121```122docs/123├── installation/ # Framework-specific setup guides124├── components/ # Component documentation (50+)125├── charts/ # Chart components (Recharts)126├── forms/ # Form integration guides127├── cli.mdx # CLI reference128├── components-json.mdx # Configuration reference129├── theming.mdx # Theming guide130├── dark-mode.mdx # Dark mode implementation131├── typography.mdx # Typography setup132├── changelog.mdx # Version history133├── about.mdx # Project philosophy134├── figma.mdx # Figma integration135└── registry/ # Registry documentation136```137138## Documentation Source139140Official shadcn/ui documentation extracted from:141- Repository: https://github.com/shadcn-ui/ui142- Website: https://ui.shadcn.com143- Last Updated: 2026-02-07144145## License146147Documentation content © shadcn. Used for educational purposes under fair use.148Skill package © OpenClaw Community, MIT License.
nordeim