Skill: leonaaardob/lb-shadcn-ui-skill (version 0.1.0)

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

path: docs/changelog/meta.json
content: {
  "title": "Changelog",
  "pages": []
}


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (CRITICAL)