setup-shadcn
Set up Shadcn/UI based on Base UI headless components
When & Why to Use This Skill
This Claude skill automates the setup and configuration of Shadcn/UI using Base UI headless components instead of the default Radix UI primitives. It streamlines the frontend development workflow by handling initialization, dependency management, and configuration updates, allowing developers to build accessible, unstyled React interfaces with Shadcn's design patterns and Base UI's robust logic.
Use Cases
- Project Initialization: Rapidly bootstrap a new React project with a custom Shadcn/UI setup that prioritizes Base UI for its unstyled, accessible component primitives.
- Library Migration: Efficiently refactor existing Shadcn/UI implementations to swap out Radix UI dependencies for Base UI equivalents to align with MUI-based ecosystems.
- Design System Development: Create a bespoke UI component library that combines Shadcn's styling flexibility with the powerful headless logic provided by Base UI.
| name | setup-shadcn |
|---|---|
| description | Set up Shadcn/UI based on Base UI headless components |
Set up Shadcn/UI with Base UI
This skill sets up Shadcn/UI using Base UI headless components instead of the default Radix UI primitives.
Why Base UI?
Base UI (from MUI) provides unstyled, accessible React components similar to Radix UI. This approach gives you Shadcn's styling conventions while using Base UI's headless primitives.
Setup Steps
1. Initialize Shadcn/UI
Run the default init command to create basic configuration files:
pnpx shadcn@latest init
Let the user to choose preferred base color (neutral, gray, zinc, stone, slate)
2. Install Base UI
Install the Base UI package. Ensure to use @base-ui/react (not @base-ui-components/react)
pnpm add @base-ui/react
3. Remove Radix UI Dependencies
After initialization, remove any Radix UI packages that were installed:
pnpm remove @radix-ui/react-*
Or selectively remove only the primitives you'll replace with Base UI equivalents.
4. Update components.json
Modify components.json to reflect the Base UI approach:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "base-{vega|nova|maia|lyra|mira}",
// ...
"iconLibrary": "lucide"
}
Ask the user which style to pick from the available Base UI styles.
Notes
- Not all Radix primitives have direct Base UI equivalents - check Base UI documentation for available components
- Base UI components may have slightly different APIs; adjust component implementations accordingly
- Refer to Base UI documentation for component usage details