Installation

Get Buzz UI up and running in your React project.

Requirements

• React 18+
• TypeScript 4.7+ (recommended)
• Next.js 13+ or any React framework
• Tailwind CSS 3.0+ (optional but recommended)

Install Package

npm

npm install @creo-team/buzz-ui

yarn

yarn add @creo-team/buzz-ui

pnpm

pnpm add @creo-team/buzz-ui

Import the Stylesheet

One import gives you every design token (all six themes) and all component styles — no Tailwind configuration, no manual CSS variables:

Required, once

// app/layout.tsx (or your app entry)
import '@creo-team/buzz-ui/styles.css'

Themes are selected with data-theme on <html> — see the theming docs for switchers, SSR and custom themes.

Import Components

Import and use components in your React application:

Basic Usage

import { Button, Card, Badge } from '@creo-team/buzz-ui'

export default function App() {
  return (
    <div className="p-8">
      <Card className="p-6">
        <h1 className="text-2xl font-bold mb-4">Welcome to Buzz UI</h1>
        <p className="text-[var(--c-text-secondary)] mb-4">
          Start building with our component library.
        </p>
        <div className="flex gap-2">
          <Button variant="bold">Get Started</Button>
          <Badge variant="success">New</Badge>
        </div>
      </Card>
    </div>
  )
}

Optional: Theme Provider

For dark mode and advanced theming, wrap your app with the ThemeProvider:

Layout with Theme Provider

import { ThemeProvider } from '@creo-team/buzz-ui'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider defaultTheme="light">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

✅ You're Ready!

Buzz UI is now installed and ready to use. Check out the Quick Start guide for next steps.