Blitz UIBlitz UIAlpha
X

Introduction

Blitz UI is a flexible UI library you can install as a dependency or copy as fully customizable components.

Blitz UI is a flexible, developer-first UI library that adapts to how you build—whether you want a drop-in dependency or fully editable, self-hosted components.

Blitz UI is designed to support both rapid development and long-term ownership, without forcing you into a single workflow. in This is what Blitz UI offers:

  • Flexible Usage: Install Blitz UI as a package or copy components directly into your project.
  • shadcn-Inspired Components: Clean, readable components designed for customization and extension.
  • Full Source Ownership: Copied components are yours—no wrappers, no hidden logic.
  • Base UI Foundation: Components are built on Base UI for strong accessibility, correct behavior, and performance.
  • Modern Stack Friendly: Built to feel native in modern React and Tailwind setups.
  • Best-of-Both-Worlds Philosophy: Convenience when you want it, control when you need it.

Why Blitz UI?

Most UI libraries force an early decision between speed and control. Blitz UI is built around the idea that you shouldn’t have to choose.

With Blitz UI, you can:

  • Move Fast: Use it as a dependency with sensible defaults and minimal setup.
  • Own Your UI: Copy components into your codebase and customize everything.
  • Base UI foundation: Get accessible, well-tested component behavior out of the box.
  • Scale Confidently: Start simple, then transition to full ownership as your project grows.
  • Avoid Lock-in: No mandatory runtime abstractions or rigid patterns.

Blitz UI meets you where you are—and grows with you.

Two Ways to Use Blitz UI

Dependency-Based Usage

Install Blitz UI as a package and start using components immediately.

This approach is ideal if you:

  • Want quick setup and low maintenance
  • Are prototyping or building internal tools
  • Prefer managed updates and shared defaults
pnpm add blitz-ui

Copy Components (shadcn-style)

For maximum flexibility, you can copy individual components directly into your project.

This approach is ideal if you:

  • Want full control over markup, styles, and behavior
  • Are building or maintaining a design system
  • Prefer zero dependency lock-in

Copied components are fully editable and become part of your codebase.

Same Philosophy, Maximum Flexibility

Blitz UI follows principles inspired by shadcn/ui while expanding on them:

  • Copy and Paste Friendly: Components are designed to be readable and modifiable.
  • Customizable by Default: Styling and behavior are easy to adapt.
  • TypeScript First: Strong typing and great editor support.
  • Tailwind Styled: Utility-first styling with no hidden CSS.
  • No Lock-in: Use only what you need, how you need it.

Component Examples

Blitz UI provides multiple examples for each component to demonstrate real-world usage:

  • Basic Usage: Clean, minimal implementations.
  • Variants & States: Different visual styles and configurations.
  • Interactive States: Loading, disabled, error, and success handling.
  • Accessibility Features: Keyboard navigation and screen reader-friendly behavior powered by Base UI.
  • Customization Examples: How to adapt components to your own design system.

Each example includes complete source code and highlights recommended patterns.

Getting Started

Ready to build with flexibility from day one?

Browse the component documentation to explore available components and usage patterns.

Each component page includes:

  • Installation Options: Use as a dependency or copy the component
  • Multiple Examples: Practical implementations and variations
  • API Documentation: Props, behaviors, and customization notes

Blitz UI gives you the freedom to choose—now and later.