Getting Started

Install and configure @blastx/ui in your Next.js application.

1. Installation

Install the package and its peer dependencies:

pnpm add @blastx/ui next-themes lucide-react

2. CSS Setup

Import the theme CSS in your globals.css file. The theme provides all color tokens, radius values, and base styles.

/* app/globals.css */
@import "tailwindcss";
@import "@blastx/ui/theme.css";

/* Scan the UI package for Tailwind classes */
@source "../../packages/ui/src/**/*.{ts,tsx}";

3. Font Setup

The theme expects Geist font family via CSS custom properties. Configure this in your root layout:

// app/layout.tsx
import { Geist, Geist_Mono } from 'next/font/google';

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
});

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased`}>
        {children}
      </body>
    </html>
  );
}

4. Provider Setup

Wrap your app with ThemeProvider for dark mode and TooltipProvider for tooltips:

// app/layout.tsx
import { ThemeProvider } from 'next-themes';
import { TooltipProvider } from '@blastx/ui';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="dark">
          <TooltipProvider>
            {children}
          </TooltipProvider>
        </ThemeProvider>
      </body>
    </html>
  );
}

5. Usage

Import and use components directly from @blastx/ui:

import { Button, Card, CardHeader, CardTitle, CardContent } from '@blastx/ui';

export function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Hello World</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  );
}

6. Theme Toggle

The library includes a ready-made theme toggle component:

import { ThemeToggle } from '@blastx/ui';

export function Header() {
  return (
    <header>
      <ThemeToggle />
    </header>
  );
}