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:

1. Component Installation - Adding components to your project
2. Customization - Theming, styling, and variants
3. Framework Setup - Integration with Next.js, Vite, Remix, etc.
4. Forms & Validation - React Hook Form + Zod patterns
5. Charts & Data - Recharts integration
6. Design System - Building custom design systems
7. 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.