Integrations

Preview-side adapters 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.

Package exports

• Tailwind v4 (@unpunnyfuns/swatchbook-integrations/tailwind): serves an @theme block so utility classes like bg-sb-surface-default resolve against your tokens inside Storybook.
• CSS-in-JS (@unpunnyfuns/swatchbook-integrations/css-in-js): serves a virtual:swatchbook/theme module of theme accessors (theme.color.accent.bg).

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.