Wiz'rd

Getting Started

Follow these steps after downloading your JSON tokens from the previous step.

1. Install packages

npm install @toucan-ui/core

2. Extract the ZIP into your project

unzip ~/Downloads/custom-tokens.zip -d ./tokens/custom

This creates a directory with raw/, alias/, and system/ subdirectories containing DTCG-formatted JSON files — the same format used by Figma token plugins and Style Dictionary.

3. Configure the CLI

Create a toucan.config.json in your project root pointing at your tokens:

{
  "tokens": "./tokens/custom",
  "outDir": "./css"
}

4. Build

npx toucan build

This compiles your tokens into a single css/toucan.css file containing foundation tokens, component styles, and responsive rules.

5. Import the CSS

/* app/globals.css */
@import './css/toucan.css';

6. Add recommended app globals

Toucan doesn't ship a CSS reset — add these baseline styles:

/* app/globals.css (continued) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--text-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

7. Build a page

import { Section, Wrapper, Heading, Text, Button } from '@toucan-ui/core';

export default function Home() {
  return (
    <Section padding="lg">
      <Wrapper>
        <Heading level={1}>Hello, custom!</Heading>
        <Text>Your theme is working.</Text>
        <Button variant="primary">Get Started</Button>
      </Wrapper>
    </Section>
  );
}