Set up Shadcn/UI based on Base UI headless components
41:T62e,
This skill sets up Shadcn/UI using Base UI headless components instead of the default Radix UI primitives.
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.
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)
Install the Base UI package. Ensure to use @base-ui/react (not )
@base-ui-components/reactpnpm add @base-ui/react
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.
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.