This guide walks you through the essential steps to seamlessly integrate Blitz UI into your shadcn project.
Blitz UI is built on the latest React 19 and Tailwind CSS v4. Ensure your project is set up with these technologies before proceeding. We recommend following the Official shadcn/ui Installation Guide to prepare your environment.
Add the Blitz UI registry namespace to your components.json. Learn more about registry config from shadcn registry docs.
{
"registries": {
"@blitz-ui": "https://blitz-ui.com/r/{style}/{name}.json"
}
}You can integrate Blitz UI components & patterns using the shadcn CLI for automation or by manual installation for full control. Both methods support our entire collection of Components and Patterns.
Blitz UI extends the official shadcn/ui theming system with additional semantic tokens that enable precise, context-aware UI states:
--destructive-foreground: Used for high-contrast destructive actions and error states.--info & --info-foreground: Semantic colors for informational alerts and badges.--success & --success-foreground: Semantic colors for success indicators and positive states.--warning & --warning-foreground: Semantic colors for cautionary callouts and warnings.--invert & --invert-foreground: Semantic colors for inverse states.This setup our custom color tokens, see the Styling Guide.
We understand that different projects have different needs. Blitz UI is built to be primitive-agnostic, offering both Base UI and Radix UI versions for each entry in our registry. This allows you to maintain consistency while choosing the library that best fits your technical requirements.
Blitz UI is designed from the ground up to be AI-friendly, making it easier for language models to understand and modify your UI.