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

Setup CSS Variables

Add the Buzz UI CSS variables to your global stylesheet:

globals.css

:root {
  /* Base colors */
  --c-background: #ffffff;
  --c-text: #1f2937;
  --c-text-secondary: #6b7280;
  --c-surface: #ffffff;
  --c-surface-2: #f9fafb;
  --c-border: #e5e7eb;
  
  /* Primary colors */
  --c-primary: #dc2626;
  --c-primary-hover: #b91c1c;
  
  /* Radius system */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
}

/* Dark theme */
.dark {
  --c-background: #111827;
  --c-text: #f9fafb;
  --c-text-secondary: #d1d5db;
  --c-surface: #1f2937;
  --c-surface-2: #374151;
  --c-border: #4b5563;
  --c-primary: #ef4444;
  --c-primary-hover: #dc2626;
}

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="primary">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.