bloomkit

Installation

Get bloomkit up and running in your React project in under five minutes.

Install the package

Choose your preferred package manager:

npm install @bloomkit/react
pnpm add @bloomkit/react
yarn add @bloomkit/react

Add the stylesheet

Import the pre-built stylesheet in your app's entry CSS file (e.g. index.css or globals.css):

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

All component styles, CSS custom properties, and animation definitions are bundled in this single file. Tailwind is not required in your app — Bloom ships its own compiled styles, so your project needs no extra build configuration.

Set up fonts

Bloom's design uses two typefaces from Google Fonts:

  • DM Sans — the body and UI font
  • Fraunces — the display / heading font

Add both to your HTML <head>:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&display=swap"
  rel="stylesheet"
/>

In a Next.js app you can add this to your root layout.tsx. In Vite-based projects, add it to your index.html.

Wrap your app with ThemeProvider

Bloom's theming and color mode system requires a ThemeProvider around your application:

import { ThemeProvider } from "@bloomkit/react";
 
export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  );
}

Render your first component

Import any component from @bloomkit/react and use it directly:

import { Button } from "@bloomkit/react";
 
export default function Page() {
  return (
    <Button variant="primary" onClick={() => alert("Hello from Bloom!")}>
      Get started
    </Button>
  );
}

That's it. No extra configuration, no theme file to create, no Tailwind preset to install — just import and go.