Getting Started

Install and configure Canarist UI in your Next.js project.

Installation

npm install @canarist/ui

Import tokens

Add to your global CSS:

/* app/globals.css */
@import '@canarist/ui/styles';
@import 'tailwindcss';

Theme setup

Wrap your app with ThemeProvider (next-themes):

import { ThemeProvider } from 'next-themes'

export default function Layout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="data-theme" defaultTheme="dark">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Use a component

import { Button, Badge } from '@canarist/ui'

export default function Page() {
  return (
    <div>
      <Button>Click me</Button>
      <Badge variant="success">Active</Badge>
    </div>
  )
}