🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Shadcn/Ui Complete Documentation
πŸ¦€ ClawHub

Shadcn/Ui Complete Documentation

by @leonaaardob

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.

Versionv0.1.0
Downloads1,738
Installs5
Stars⭐ 1
#legal
TERMINAL
clawhub install lb-shadcn-ui-skill

πŸ“– About This Skill

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.

    πŸ’‘ Examples

    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