shadcn/ui

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.

SKILL.md

---
id: shadcn-ui
name: shadcn/ui
version: 1.0.0
author: OpenClaw Community
description: 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.
categories:
  - ui
  - components
  - documentation
  - design-system
tags:
  - shadcn
  - ui
  - components
  - tailwind
  - radix
  - react
  - nextjs
  - design-system
  - accessibility
  - theming
homepage: https://ui.shadcn.com
repository: https://github.com/shadcn-ui/ui
documentation: https://ui.shadcn.com/docs
---

# 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.