Integrations

Preview-side adapters that let stories use third-party styling libraries against swatchbook's tokens. Two integrations ship today, both under @unpunnyfuns/swatchbook-integrations:

• Tailwind: alias Tailwind v4 utility scales to your DTCG tokens, so bg-sb-surface-default / p-sb-md work in stories.
• CSS-in-JS: a typed JS theme accessor for emotion, styled-components, or any ThemeProvider consuming a plain object.

Both are preview-only. They let utility classes and theme accessors resolve correctly inside Storybook; they don't replace your production build. For production artifacts, run Terrazzo's CLI against the same DTCG sources. Keep both pipelines in step with shared Terrazzo options.

Wiring

All integrations plug into the addon options the same way:

.storybook/main.ts

import { defineMain } from '@storybook/react-vite/node';
import tailwindIntegration from '@unpunnyfuns/swatchbook-integrations/tailwind';
import cssInJsIntegration from '@unpunnyfuns/swatchbook-integrations/css-in-js';

export default defineMain({
  addons: [
    {
      name: '@unpunnyfuns/swatchbook-addon',
      options: {
        configPath: '../swatchbook.config.ts',
        integrations: [tailwindIntegration(), cssInJsIntegration()],
      },
    },
  ],
});

Tailwind contributes a global @theme block the addon auto-injects into the preview. CSS-in-JS exposes named JS exports stories import explicitly. Token-file edits flow through HMR, so each integration's output stays in lockstep without a server restart.

Writing your own integration

Implement the SwatchbookIntegration contract from @unpunnyfuns/swatchbook-core, export a factory from your package, drop the factory's result into integrations[]. Mechanism sketched in the architecture doc.