Take it with you

Install the React package from npm, or link the stylesheets straight from this site. Either way, add a theme file and the system is yours.

Install from npm

@dovetail-ds/react has every component, typed, with the stylesheets. React 18 or newer is the only peer dependency; install react-dom alongside, since your app renders with it and npm won't add it for you.

npm install @dovetail-ds/react react react-dom

Import the stylesheets once at your app's root, your theme last:

import "@dovetail-ds/react/fonts.css"; // optional: Geist from Google Fonts
import "@dovetail-ds/react/styles.css";
import "./dovetail-theme.css"; // from Configure, or written by the setup skill

import { Button, Section, Stack } from "@dovetail-ds/react";

Set up with Claude Code

The package ships a Claude Code skill that asks about your brand, or takes a theme you downloaded from Configure, then writes the theme and wires it into your app. Copy it in, then ask Claude to “set up Dovetail with our brand”.

mkdir -p .claude/skills
cp -r node_modules/@dovetail-ds/react/skills/dovetail-setup .claude/skills/

Link from this site

The whole system is served from this site under system/, at the paths it was authored with. Link one stylesheet and you have the tokens.

<link rel="stylesheet" href="system/styles.css">
<link rel="stylesheet" href="system/tokens/themes/theme-editorial.css">

Dark mode needs no second stylesheet. Put class="dark" on <html>.

Stylesheets

File	What it is
`styles.css`	The single entry point. Import lines only.
`tokens/base.css`	Minimal element defaults.
`tokens.css`	Every token as flat custom properties.
`components/bundle.css`	The global sheets joined into one file.

Tokens

File	What it is
`tokens/dovetail.tokens.json`	DTCG source of truth.
`tokens.json`	The token list this site renders from.
`templates/_support/style-dictionary.config.cjs`	Style Dictionary build config.

Themes

File	What it is
`tokens/themes/base-dark.css`	Dark mode. Re-points the same semantic names.
`tokens/themes/theme-editorial.css`	Warm primary colour, serif headings, pill controls.
`tokens/themes/theme-mono.css`	No brand hue, square corners, borders over shadows.
`tokens/themes/density-compact.css`	Compact control heights and insets.
`tokens/themes/theme-custom.css`	Where the configurator commits a theme.

Components

File	What it is
`components/bundle.js`	Every component, pre-built, assigned to one global.
`components/lib/react.production.min.js`	React 18.3.1, as the previews load it.
`components/lib/react-dom.production.min.js`	React DOM 18.3.1.

Templates and tools

File	What it is
`templates/settings-page/SettingsPage.dc.html`	A product settings screen, composed from Dovetail only.
`theme-configurator.html`	Tune a theme live and export the CSS.

Everything else

Component sources, typed contracts, per-component guides, the foundation spec cards and the templates all sit under system/ in the repository, unchanged from how they were authored. The preview documents in previews/ are the same cards with three script tags added so each one runs on its own.