Bloom Logo

Installation

Choose how to use Bloom UI in your React or Next.js project: copy components directly using our official CLI, or install the compiled @bloomui/react package via NPM.

CLI Installation

01

CLI — Full Source Code Ownership

Download raw React component code directly into your repository.

1. Initialize Bloom UI

Run the initialization command in your project root to set up design system tokens and helper utilities.

zsh — 80x24
user@macbook ~ %npx @bloomui-react/cli init
✔Created lib/utils.ts
✔Created lib/design-system.ts
✔Created bloom.json project manifest
Bloom UI initialized successfully!

2. Add Components

Add any of our 95 components directly to your project codebase.

zsh — 80x24
user@macbook ~ %npx @bloomui-react/cli add button switch avatar card tableOfContents
Fetching component definitions from registry...
✔Created components/ui/button/button.tsx
✔Created components/ui/switch/switch.tsx
✔Created components/ui/avatar/avatar.tsx
✔Created components/ui/card/card.tsx
✔Created components/ui/tableOfContents/tableOfContents.tsx
✔All components added directly into your codebase!

3. Configure AI Assistant Rules (Optional)

Generate dynamic context files for AI Coding Tools (Antigravity, Cursor, Windsurf, Copilot, or llms.txt). The generated rules list all components, exact props, and path imports customized to your project.

zsh — 80x24
user@macbook ~ %npx @bloomui-react/cli setup-ai
? Select the AI assistants you use: Antigravity, Cursor
Generating AI context rules...
✔Created AGENTS.md (for Antigravity)
✔Created .cursorrules (for Cursor)
✔AI rules files generated successfully!

4. Update Components

Keep your components and dynamic markdown docs up-to-date with the latest versions from our registry.

zsh — 80x24
user@macbook ~ %npx @bloomui-react/cli update
? Select components to update: button, avatar
Updating button component...
✔Updated button component files
Updating avatar component...
✔Updated avatar component files
✔Successfully updated components in your project!

5. Health Check / Diagnostics

Validate imports, files, configurations, and peer dependencies in your workspace.

zsh — 80x24
user@macbook ~ %npx @bloomui-react/cli doctor
Analyzing Bloom UI project health...
✔✔ bloom.json manifest exists and is valid JSON.
✔✔ Component directory exists at: components/ui
✔✔ Utility directory exists at: lib
✔✔ Utility file found: lib/utils.ts
✔✔ Utility file found: lib/design-system.ts
✔✔ Ripple animations directory found at: lib/ripple
✔✔ Local markdown documentation directory found at: lib/docs
✔✔ Dependency 'clsx' is installed.
✔✔ Perfect! Your Bloom UI setup is completely healthy.

NPM Package

02

NPM Package — Standard Dependency

Install pre-compiled components via NPM package management.

1. Initialize Theme & CSS Config

Run the CLI in your project root to automatically configure Tailwind CSS v4 variables, keyframes, utilities, and the @source directive for the pre-compiled package — no manual setup required.

zsh — 80x24
user@macbook ~ %npx @bloomui-react/cli init
✔Created lib/utils.ts
✔Created lib/design-system.ts
✔Created bloom.json project manifest
Bloom UI initialized successfully!

2. Install Dependency

Install the pre-compiled library as a dependency in your project.

zsh — 80x24
user@macbook ~ %npm install @bloomui-react/components
✔Installed @bloomui-react/components v1.0.4 (ESM & CJS bundles)

3. Import Components

Import any component directly from @bloomui-react/components:

App.tsx
import { Button, TableOfContents, Snippet } from "@bloomui-react/components";

export default function App() {
  return <Button color="primary">Hello Bloom</Button>;
}

What gets created in your project

Standardized files and utilities configured during initialization.

Classnames Utilitylib/utils.ts

Provides the cn() helper for merging Tailwind classes cleanly using clsx and tailwind-merge.

Design Tokenslib/design-system.ts

Defines design radius scales, sizing scales, and neutral theme color tokens.

Local Markdown Docslib/docs/

Stores full markdown documentation files for each installed component to give detailed context for AI Coding Assistants.

Project Manifestbloom.json

Stores project paths so the CLI knows where to copy new components automatically.

PreviousIntroductionNextChangelog