Installation

@cdz/ui resolves through the pnpm workspace, so there is no install step.

1. Import the stylesheet once

At your app root (for example, the App Router root layout), import the single design-system stylesheet. It ships the tokens, all three themes, dark mode, and component styles:

import '@cdz/ui/styles.css';

2. Wrap your tree in the provider

import { ThemeProvider } from '@cdz/ui';

export default function RootLayout({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

3. Use components

import { Button, Card, Badge, Input } from '@cdz/ui';

export function Example() {
  return (
    <Card header="Profile">
      <Badge tone="success">Active</Badge>
      <Input label="Name" placeholder="Ada Lovelace" />
      <Button>Save</Button>
    </Card>
  );
}

Next.js note

@cdz/ui ships TypeScript and CSS from source, so a Next.js consumer must list it under transpilePackages:

// next.config.mjs
const config = {
  transpilePackages: ['@cdz/ui'],
};

React and react-dom are peer dependencies (range >=18), so the consuming app supplies the single React copy — there is never a second copy in the bundle.

1. Import the stylesheet once

2. Wrap your tree in the provider

3. Use components

Next.js note

On this page