@bonzzu/ui

Bonzzu Design System — components and tokens, extracted from Figma.

Installation

npm install @bonzzu/ui
# or
pnpm add @bonzzu/ui

Usage

1. Import the CSS (tokens + theme)

In your app's main CSS entry file:

@import "tailwindcss";
@import "@bonzzu/ui/styles";

The @bonzzu/ui/styles import adds the @theme {} block with all design tokens (colors, typography, spacing, border-radius) to your Tailwind v4 setup.

2. Configure Tailwind v4 to scan the library

In your vite.config.ts (or wherever your CSS is processed):

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()],
}

Tailwind v4 auto-detects content — no content array needed. The library's class names are pre-built into the components; no additional config required.

3. Import components

import { Button, Input } from '@bonzzu/ui'

function App() {
  return (
    <div>
      <Input
        label="Email"
        placeholder="Enter your email"
        caption="We'll never share your email."
      />
      <Button>Submit</Button>
    </div>
  )
}

Components

Button

<Button variant="primary" size="lg">
  Click me
</Button>

<Button disabled>
  Disabled
</Button>

| Prop | Type | Default | Description | |---|---|---|---| | variant | 'primary' | 'primary' | Visual style | | size | 'lg' | 'lg' | Size variant | | disabled | boolean | false | Disabled state | | ...rest | ButtonHTMLAttributes | — | Native button props |

States: Default → Hover → Pressed → Focus-visible (ring) → Disabled.

Input

<Input
  label="Search"
  placeholder="Type to search..."
  caption="Optional helper text"
  iconLeft={<SearchIcon />}
  iconRight={<XIcon />}
/>

| Prop | Type | Description | |---|---|---| | label | string | Label rendered above the input | | caption | string | Helper text below the input | | iconLeft | ReactNode | Icon on the left side | | iconRight | ReactNode | Icon on the right side | | ...rest | InputHTMLAttributes | Native input props |

States: Placeholder → Filled → Active (focus-within shows primary border).

Design tokens

All tokens are exposed as CSS custom properties and available as Tailwind utilities:

/* Colors */
--color-primary-50 … --color-primary-950   /* bg-primary-50, text-primary-500, etc. */
--color-grey-50 … --color-grey-950

/* Typography */
--font-headline   /* font-headline → 'Formula Condensed', sans-serif */
--font-body       /* font-body → 'Manrope', sans-serif */
--text-headline   /* text-headline → 90px */
--text-subtitle   /* text-subtitle → 22px */
--text-body       /* text-body → 18px */

/* Spacing */
--spacing-1 … --spacing-20  /* Tailwind scale in 4px increments */

/* Border radius */
--radius-sm    /* 4px */
--radius-full  /* 9999px */

Required fonts

This package references font families but does not embed font files. Load them in your project before using the components.

Manrope (Google Fonts — free)

<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=Manrope:wght@400;500;700&display=swap" rel="stylesheet">

Formula Condensed (proprietary)

Load via @font-face with the files provided by the Bonzzu design team:

@font-face {
  font-family: 'Formula Condensed';
  src: url('/fonts/FormulaCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}