Welcome to Bloom UI
A premium React component library built on top of Radix UI, Tailwind CSS v4, and Framer Motion. Copy the source code directly into your project — no package to install, no black-box, full ownership over your components.
Why Bloom?
Core principles behind every component in the library.
You own the code
Unlike traditional libraries, you copy the source directly into your project. Customize freely with no black-box limitations.
Consistent design system
Centralized tokens for colors, sizes, and border-radius guarantee visual consistency across all components.
Accessibility out of the box
Built on top of Radix UI — every component follows WAI-ARIA standards with zero extra configuration required.
Fluid animations
Framer Motion integration for transitions and effects (like the ripple click feedback) that make your interface feel alive.
Native dark mode
Full light and dark theme support via semantic CSS variables. Works automatically with next-themes out of the box.
CLI for fast installation
Use the official CLI to initialize the design system and add components without any manual setup work.
Installation via CLI
Use the official Bloom CLI to add components to your project in seconds.
npx @bloomui-react/cli initnpx @bloomui-react/cli add buttonWhat does init set up?
lib/utils.ts— the cn() utility for class name merginglib/design-system.ts— size, color, and radius design tokenslib/ripple/— ripple effect component and hookclsx, tailwind-merge— styling dependencies, auto-installed
Bloom requires Tailwind CSS v4 to be already configured in your project before running init.
Available components
The library is actively growing. More components coming soon.
Built with
Bloom is built on the best tools in the modern React ecosystem.
React
UI library
Next.js
Docs framework
TypeScript
Static typing
Tailwind CSS v4
Utility-first CSS
Radix UI
Accessible primitives
Framer Motion
Animations