Buzz UI Documentation

A modern React component library with TypeScript support and comprehensive theming.

🚀 Getting Started

Installation

Install Buzz UI in your React project:

Package Manager

npm install @creo-team/buzz-ui

Quick Setup

Import and use components:

Basic Usage

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

export default function App() {
  return (
    <Card>
      <Button>Click me</Button>
    </Card>
  )
}

🎨 Theme System

Centralized Design Tokens

Yes! Buzz UI has a completely centralized theme system with customizable:

Colors

--c-primary

Radius

--radius-lg

Shadows

--shadow-md

Spacing

CSS variables

Theme Provider Setup

Theme Setup

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

export default function App({ children }) {
  return (
    <ThemeProvider defaultTheme="light">
      {children}
    </ThemeProvider>
  )
}

Custom Colors

Custom Theme

:root {
  --c-primary: #7c3aed;        /* Purple theme */
  --c-primary-hover: #6d28d9;
  --radius-lg: 12px;           /* More rounded */
  --shadow-md: 0 8px 16px rgba(0,0,0,0.15);
}

📚 Explore

🔥 Brand Identity

See the Buzz UI logo system and brand elements.

View Logo Demo →

🧩 Components

Browse the complete component library with examples.

View Components →

🎨 Theming

Learn how to customize colors and design tokens.

Theme Guide →

⚡ Examples

See components in action with real-world examples.

See Examples →

✨ Quick Example

Build a Card with Button

Example Component

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

export default function Example() {
  return (
    <Card className="p-6">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-semibold">Product Card</h2>
        <Badge variant="success">New</Badge>
      </div>
      <p className="text-[var(--c-text-secondary)] mb-4">
        This is an example of using multiple Buzz UI components together.
      </p>
      <Button variant="primary">
        Get Started
      </Button>
    </Card>
  )
}

🌟 Features

🎯 TypeScript First

Full TypeScript support with comprehensive type definitions.

🌙 Dark Mode

Built-in dark mode support with smooth transitions.

🎨 Customizable

Easy to customize with CSS variables and design tokens.

⚡ Performant

Optimized for performance with minimal runtime overhead.

🔔 Toast Provider Setup

Setting Up Toast Notifications

To enable toast notifications across your application, wrap your app with the ToastProvider.

Toast Provider Setup

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

function App() {
  return (
    <ToastProvider>
      <YourAppComponents />
    </ToastProvider>
  )
}

This setup ensures that all toast notifications are managed and displayed correctly.