A comprehensive skill for building accessible, high-performance user interfaces using shadcn/ui, Radix UI, and Tailwind CSS.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shadcn
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install shadcn using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is shadcn-ui?
The shadcn-ui skill empowers developers to build professional-grade user interfaces by leveraging a collection of reusable components. Unlike traditional component libraries, this skill focuses on components you own and can modify directly within your project. It integrates seamlessly with Radix UI for robust accessibility and Tailwind CSS for rapid styling. This Openclaw Skills implementation streamlines the process of scaffolding Next.js applications, managing component variants through Class Variance Authority (CVA), and ensuring type safety with TypeScript.
By using this skill, developers can maintain full control over their UI code while benefiting from industry-standard patterns for forms, modals, and navigation. It bridges the gap between ready-to-use components and bespoke design systems, allowing for deep customization through CSS variables and Tailwind configuration.
shadcn-ui Use Cases
- Scaffolding new Next.js or React projects with a pre-configured UI foundation.
- Installing and configuring specific UI components like buttons, dialogs, and tables via CLI.
- Building complex, type-safe forms using React Hook Form and Zod validation.
- Implementing accessible navigation patterns with sheets, dropdowns, and navigation menus.
- Developing custom design systems by modifying CSS variables in a centralized theme file.
- Enhancing user experience with toast notifications and loading states.
How shadcn-ui Works
- Initialize the project environment using the shadcn CLI to set up Tailwind and global CSS variables.
- Install desired components from the library which are then copied directly into the project's components directory.
- Configure the
cnutility to handle dynamic Tailwind class merging and conflict resolution. - Define component variants and sizes using Class Variance Authority to ensure consistent styling across the application.
- Compose complex interfaces by nesting primitives and handling state with React Hooks.
- Deploy consistent global styles by updating the HSL values in the base CSS layer.
shadcn-ui Setup
To begin using this skill within your AI agent environment, run the following installation command:
npx clawhub@latest install shadcn-ui
For a new project setup, initialize the configuration with:
npx shadcn@latest init
Then, add the necessary components as needed:
npx shadcn@latest add button input form card
shadcn-ui Data Schema & Taxonomy
| Category | Implementation Detail |
|---|---|
| Components | Stored in @/components/ui/ as raw source code |
| Utilities | Helper functions like cn found in @/lib/utils.ts |
| Theming | HSL variables defined in globals.css |
| Validation | Zod schemas used for form state management |
| Types | TypeScript interfaces generated automatically per component |
shadcn-ui Advanced Features
- Full support for the
asChildpattern using Radix Slot for flexible element rendering. - Multi-variant management via CVA for complex design requirements.
- Seamless integration with Next.js App Router and Server Components.
- Automatic accessible ARIA attribute handling through Radix UI primitives.
- Tree-shaking optimization by only installing required component source files.
- Theme switching capabilities with native dark mode support via CSS variables.
SKILL.md
Loading
Related Openclaw Skills
Local Testnet Setup for Uniswap
A comprehensive tool to launch a local Anvil testnet forking live chains with pre-deployed Uniswap contracts and multi-token funded accounts.
Setup DCA for Uniswap
A comprehensive automation skill for establishing non-custodial dollar-cost averaging strategies on Uniswap with optimized routing and safety guards.
Setup Agent Wallet
A comprehensive skill for automating the provisioning and security configuration of autonomous trading wallets for Uniswap agents.
Session Handoff
A professional framework for creating detailed handoff documents that allow fresh AI agents to resume complex work with zero context loss.
Startup Metrics
A comprehensive framework for tracking and optimizing core startup KPIs from Seed through Series A.
Subagent-Driven Development
A high-precision execution framework that dispatches fresh subagents for independent tasks with automated two-stage review cycles.
Featured*
