Documentation

Everything you need to get started with Brand-OS

Brand-OS Core Installation

Get started with Brand-OS Core in under 5 minutes

Step 1: Install the package

Choose your preferred package manager:

terminal
npm install @caboo/ui @caboo/tokens
terminal
yarn add @caboo/ui @caboo/tokens
terminal
pnpm add @caboo/ui @caboo/tokens

Step 2: Import Brand-OS styles

Add to your root layout or _app.tsx:

import '@caboo/ui/styles/globals.css'
import '@caboo/tokens/css/tokens.css'
import '@caboo/ui/styles/brand-os.css'

Step 3: Start using components

import { 
  Button, 
  ConsoleGlassCard, 
  ConsolePageHeader 
} from '@caboo/ui'

export default function Dashboard() {
  return (
    <div>
      <ConsolePageHeader 
        title="My Dashboard" 
        subtitle="Welcome to Brand-OS" 
      />
      <ConsoleGlassCard>
        <Button variant="primary">
          Get Started
        </Button>
      </ConsoleGlassCard>
    </div>
  )
}

Step 4: Configure Tailwind (optional)

Extend your tailwind.config.js to use Brand-OS tokens:

module.exports = {
  content: [
    './node_modules/@caboo/ui/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        brand: {
          50: 'var(--brand-50)',
          100: 'var(--brand-100)',
          // ... all brand colors
        }
      }
    }
  }
}