setup-shadcn
Set up Shadcn/UI based on Base UI headless components
When & Why to Use This Skill
This Claude skill automates the integration of Shadcn/UI with Base UI (MUI's headless library) as an alternative to the default Radix UI primitives. It streamlines the frontend development workflow by handling initialization, dependency management, and configuration updates, allowing developers to build accessible, high-performance user interfaces with MUI's unstyled components while maintaining the Shadcn design system's flexibility.
Use Cases
- Scenario 1: Bootstrapping a new React project with a custom UI architecture that requires the accessibility and headless features of Base UI instead of Radix UI.
- Scenario 2: Migrating an existing Shadcn/UI setup to use Base UI primitives to align with MUI-based design systems or specific technical requirements.
- Scenario 3: Automating the repetitive manual steps of installing packages, removing conflicting dependencies, and updating components.json for non-standard UI stacks.
| 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
Select your preferred options when prompted (style, color, CSS variables, etc.).
2. Install Base UI
Install the Base UI package. Ensure to use @base-ui/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