Getting started

@bhodgson/design-system is Tailwind CSS v4 theme tokens, Preact components and a page layout. These docs are built with it.

Install#Link to this section

pnpm add @bhodgson/design-system preact

Import the theme after Tailwind in your stylesheet. It adds the colour, font and spacing tokens as Tailwind utilities, such as bg-surface, text-muted and border-data-3.

@import "tailwindcss";
@import "@bhodgson/design-system/theme.css";

Use the components#Link to this section

import { Button, Highlight, Page, Panel } from "@bhodgson/design-system";

<Page
  eyebrow="playground"
  project="my-project"
  title={
    <>
      A <Highlight>new</Highlight> project
    </>
  }
>
  <Panel id="hello" title="Hello">
    <Button>Get started</Button>
  </Panel>
</Page>;

Every component takes a class, merged with cn() so yours replaces theirs where they conflict. Use cn() the same way in your own components.

Apply the saved theme#Link to this section

In an app that renders in the browser, call applyStoredTheme() before the first render, so a theme picked with the theme toggle applies without a flash. On server-rendered pages, put themeScript in an inline <script> in <head> instead.

import { applyStoredTheme } from "@bhodgson/design-system";

applyStoredTheme();
render(<App />, document.getElementById("app"));