ClawHub

Shadcn/Ui Complete Documentation

Other

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.

Install

openclaw skills install lb-shadcn-ui-skill

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:

License

Documentation content © shadcn. Used for educational purposes under fair use. Skill package © OpenClaw Community, MIT License.