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.

README (SKILL.md)

shadcn/ui Documentation

Name: Shadcn/Ui Complete Documentation
Author: leonaaardob

Complete shadcn/ui documentation extracted from the official shadcn/ui repository.

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:

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

Usage Guidance

This package is documentation-only and appears to be what it claims: a local copy of the shadcn/ui docs. It does not ask for credentials or install code by itself. If you follow its instructions (for example, running `npx shadcn@latest` commands, initializing an MCP server, or adding custom registries), exercise normal caution: only run CLI commands from trusted sources, review any packages or registry items before installing them, and never paste secret tokens into third-party registries without verifying the registry's trustworthiness. If you plan to enable the MCP workflows described, understand that those workflows may prompt you to provide registry tokens or allow network access — review and limit those tokens' scope where possible.

Capability Analysis

Type: OpenClaw Skill Name: lb-shadcn-ui-skill Version: 0.1.0 The skill bundle provides comprehensive documentation for the shadcn/ui component library. All files, including SKILL.md and README.md, are purely informational and describe how developers can use the shadcn/ui CLI and integrate it with various frameworks and AI tools (via Model Context Protocol). The documentation includes examples of CLI commands (`npx shadcn@latest init`, `add`, `migrate`, `mcp init`) and references to external, legitimate URLs. Mentions of environment variables are for user-configured authentication to external registries, not for exfiltration by the skill. There is no evidence of prompt injection against the OpenClaw agent, malicious execution, data exfiltration, persistence, or obfuscation within the provided content. The reference to `llms.txt` in `docs/(root)/meta.json` is noted, but without the file's content, it cannot be classified as harmful.

Capability Assessment

✓ Purpose & Capability

The skill name and description match the included files: 201 MDX docs for shadcn/ui (installation, components, theming, CLI, registries, MCP, etc.). It requests no binaries, no env vars, and exposes documentation only, which is proportionate to 'Complete Documentation'.

ℹ Instruction Scope

SKILL.md and included docs are documentation-only and do not instruct the agent to read system files or exfiltrate data. They do, however, include operational guidance that references running external commands (e.g., `npx shadcn@latest ...`) and configuring MCP/registries (including examples that show env var expansion). That guidance could lead a user or agent to run networked CLI commands or provide registry tokens, but the skill itself does not request or perform those actions.

✓ Install Mechanism

No install spec and no code files to execute — the skill is instruction-only (lowest install risk). The package only contains documentation (MDX) and no downloads or extract steps are present.

ℹ Credentials

The skill declares no required environment variables and no primary credential. The docs include examples showing use of environment variables (e.g., ${REGISTRY_TOKEN}) for registry authentication, but the skill does not actually request those secrets. This is informational rather than a demand for credentials, but users should be aware the documented workflows may require tokens when followed.

✓ Persistence & Privilege

always is false and the skill is user-invocable; model invocation is allowed (platform default). The skill does not request system-wide config changes or attempt to persist credentials — it only provides docs that describe how to configure external MCP servers and CLIs.

Version History

v0.1.0

Initial release, providing comprehensive shadcn/ui documentation. - Includes 201 MDX files (1.4MB) covering installation, over 50 components, theming, forms, charts, and framework integrations. - Offers step-by-step setup guides for Next.js, Vite, Remix, Astro, Laravel, Gatsby, React Router, and Tanstack Router. - Covers advanced topics like CLI usage, custom registries, theming, RTL support, Figma integration, and accessibility. - Documentation extracted directly from the official shadcn/ui repository, ensuring up-to-date and accurate information. - Designed for easy copy-paste of customizable, accessible React UI components based on Radix UI and Tailwind CSS.

Metadata

Slug lb-shadcn-ui-skill

Version 0.1.0

License —

All-time Installs 4

Active Installs 4

Total Versions 1

Frequently Asked Questions

What is Shadcn/Ui Complete Documentation?

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. It is an AI Agent Skill for Claude Code / OpenClaw, with 1466 downloads so far.

How do I install Shadcn/Ui Complete Documentation?

Run "/install lb-shadcn-ui-skill" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Shadcn/Ui Complete Documentation free?

Yes, Shadcn/Ui Complete Documentation is completely free (open-source). You can download, install and use it at no cost.

Which platforms does Shadcn/Ui Complete Documentation support?

Shadcn/Ui Complete Documentation is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Shadcn/Ui Complete Documentation?

It is built and maintained by leonaaardob (@leonaaardob); the current version is v0.1.0.

More Skills

Shadcn/Ui Complete Documentation