@toucan-ui/cli

Toucan's token compiler and React source-ejection CLI. This is the only Toucan package an application installs.

Install

pnpm add -D @toucan-ui/cli

With npm:

npm install -D @toucan-ui/cli

Use pnpm exec toucan … below. npm users can replace it with npx toucan ….

First setup

pnpm exec toucan init
pnpm exec toucan build
pnpm exec toucan eject button input box
pnpm exec toucan doctor

Import the generated CSS once:

@import './components/toucan/_toucan/styles/toucan.css';

Then import component groups from their local barrels:

import { Button } from '@/components/toucan/button';

Commands

toucan init

Creates or normalises toucan.config.json and prints the next commands.

--out <path>      Toucan output directory
--reset           Include Toucan reset CSS
--yes, -y         Use defaults without prompts
--no-interactive  Disable prompts
--help, -h        Show command help

toucan build

Compiles the active DTCG tokens and responsive templates to <outDir>/_toucan/styles/toucan.css.

--tokens <path>   Custom token directory
--out <path>      Toucan output directory
--components <x>  Comma-separated component CSS names
--reset           Include reset CSS
--help, -h        Show command help

Responsive props use sm, md, lg, and xl. Their values come from the active raw/breakpoint.json and are regenerated on every build.

toucan eject

Copies complete, editable component groups and their minimal local dependency closure. Existing changed files are protected unless --force is supplied.

[component ...]   One or more group names, or "all"
--out <path>      Override the configured output directory
--force           Replace conflicting generated files
--no-interactive  Require component names instead of prompting
--help, -h        Show command help

Supported groups: accordion, alert, avatar, badge, box, breadcrumb, button, checkbox, dialog, drawer, dropdown-menu, flex, grid, heading, icon, input, link, page, padding, pagination, popover, progress, radio, rating, section, select, separator, skeleton, slider, table, tabs, text, textarea, toast, toggle, tooltip, and wrapper.

toucan info and toucan doctor

info prints the resolved build context. doctor validates React peers, locally ejected source, tokens, breakpoints, CLI style assets, and responsive templates.

--tokens <path>   Custom token directory
--out <path>      Toucan output directory
--help, -h        Show command help

Use toucan --help, toucan help <command>, or toucan <command> --help for built-in help. Unknown commands and flags fail.

Configuration

{
  "tokens": "./tokens",
  "outDir": "./components/toucan",
  "reset": false
}

tokens is optional; when omitted the CLI uses its bundled default preset. outDir defaults to ./components/toucan, and reset defaults to false.

Runtime ownership

Generated source imports React and React DOM, not Toucan runtime packages. Component CSS lives beside the copied group, shared helpers live under _toucan, and the resulting code belongs to the application.