@bloomkit/react
an ambient, organic react component library — components that breathe
most component libraries are neutral by design. bloomkit takes the opposite position: it has a personality. built for wellness apps, meditation software, journaling tools, and creative products — any interface where the ui itself should feel calm, alive, and a little human. every animation breathes, blobs morph organically, color lives in warm soft palettes, and the library ships with signature components like breathingbox and bloomorb alongside a full suite of primitives (button, input, modal, accordion, select, and more) — so it's a complete toolkit, not just a decoration pack.
key features
- 30+ components across signature, form, layout, feedback, overlay, and display categories
- signature components (breathingbox, bloomorb) with ssr-safe morphing animations
- token-first theming via css custom properties — no hardcoded values
- runtime palette switching with three built-in palettes (midnight garden, desert rose, ocean mist)
- consumer-defined palettes are first-class with sensible fallbacks
- prefers-reduced-motion respected globally
- ships pre-compiled css so consumers need zero tailwind setup
- tree-shakeable by design — primitives-only consumers never pay for animation code
tech stack
library
react 18+
typescript
tailwind css v4
radix ui
motion
cva
tailwind-merge
tooling
tsup
vitest
testing library
biome
pnpm
changesets
distribution
npm
esm + cjs + .d.ts
github
challenges
- giving a neutral-by-nature primitive library a strong point of view without sacrificing composability
- keeping breathing and morph animations deterministic enough to survive ssr hydration
- coexisting cleanly with any consumer css stack (tailwind, css modules, plain css) without specificity fights
- designing a theming layer flexible enough for runtime palette switching but simple enough to adopt
- running a solo release pipeline with real versioning discipline and a live docs site
solutions
- seeded unique morph sequences from react's useid so hydration stays stable and each instance still looks unique
- used css cascade layers and custom properties so the library drops into any stack without cascade conflicts
- built a token-first architecture where every visual property reads from --bloom-* variables
- formalized the full scaffold → test → playground → changelog → build → publish pipeline as a repeatable agent skill
- shipped 220+ tests across 34 files to keep refactors safe while the api evolves