@bhodgson/design-system

My design system: Tailwind CSS theme tokens, Preact components and a page layout.

Read the docs for guides, live examples and the API reference.

Use it

pnpm add @bhodgson/design-system preact

Import the theme after Tailwind in your stylesheet:

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

Then use the components:

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>;

cn() joins classes the way the components do, so yours replace theirs cleanly.

The docs site's source is in docs/, and @bhodgson/docs styles any Starlight site the same way.

Call applyStoredTheme() before the first render, or put themeScript in <head> on server-rendered pages, so a theme picked with ThemeToggle applies without a flash.

Develop

pnpm install
pnpm dev        # The docs site, at http://localhost:4321/design-system/, showing your changes as you save
pnpm test:run

Before opening a pull request: pnpm format && pnpm lint && pnpm typecheck && pnpm knip, and pnpm changeset if the published package changed. Releasing: docs/src/content/docs/contributing/releasing.mdx.