bloomkit

bloomkit

Components that breathe.
An ambient React component library with organic design tokens, dark mode, and warm aesthetics.

See it live

Real components, rendered right here. No screenshots.

Buttons

Badges

SageSandLavenderRose

Card

Ambient interface

Cards that feel tactile, with soft radii and organic shadows.

Every component responds to hover and focus with gentle, breathing transitions.

Controls

Avatars

AB
CD
EF
+3

Input

Tabs

Visual first, code second.

Progress & Slider

72% complete

Alert

Why bloomkit

Organic Design Tokens

CSS variables for every colour, radius, and spacing value. Override one variable, change everything.

Dark Mode Built-in

System detection out of the box, plus a one-line toggle. Both palettes ship by default.

Themeable

Custom palettes in one CSS override. Swap warm earth tones for cool ocean — no rebuild needed.

Get started in three steps

From zero to bloomkit in under a minute.

1

Install

npm install @bloomkit/react
2

Import styles

@import "@bloomkit/react/styles.css";
3

Use a component

import { Button } from "@bloomkit/react";

export default function App() {
  return <Button>Hello bloomkit</Button>;
}