@thebook/ui

Shared UI kit for The Book apps (main app, club, tools). Ships theme tokens, header, buttons, avatar, and theme toggle.

Install

# from repo root (npm workspaces not required, but recommended)
npm install @dbook-public/ui

If you publish privately, add your registry (e.g., GitHub Packages) to .npmrc.

Usage

import "@dbook-public/ui/styles/theme.css";
import { Header, ThemeProvider, ThemeToggleButton, Button } from "@dbook-public/ui";

export default function AppShell() {
  return (
    <ThemeProvider initialTheme="dark">
      <div className="tbk-base">
        <Header
          brand={<span>dbook</span>}
          links={[{ label: "Home", href: "/", active: true }, { label: "Clubs", href: "/clubs" }]}
          ctaLabel="Create"
          onCtaClick={() => console.log("create")}
          profile={{ name: "Ada Lovelace", handle: "ada", avatarUrl: undefined }}
        />
        {/* your page */}
      </div>
    </ThemeProvider>
  );
}

Build & publish

cd packages/ui
npm install
npm run build
npm publish --access public # add --otp 123456 if your account enforces 2FA

Notes

• Expects React 18/19 and Next 15/16 as peers.
• CSS is intentionally separate; import @dbook-public/ui/styles/theme.css once in your app.
• Extend tokens via :root[data-theme="light"] / :root[data-theme="dark"] overrides if you need brand tweaks.