Theming

Customize Kiwimi Lab to match your brand.

Kiwimi Lab components use Tailwind CSS tokens so you can theme the entire library from one place.

Color tokens

Extend your tailwind.config.ts with semantic colors that match the Kiwimi Lab palette:

TypeScript

theme: {
  extend: {
    colors: {
      canvas: "#161616",
      panel: "#1c1c1c",
      line: "#393939",
      muted: "#9a9a9a",
      faint: "#6b6b6b",
    },
  },
},

CSS variables

For runtime theming, define variables in globals.css:

CSS

:root {
  --background: #161616;
  --foreground: #f5f5f5;
  --border: #393939;
  --muted: #9a9a9a;
}

Reference them in components with bg-[var(--background)] or map them in Tailwind.

Typography

Kiwimi Lab uses system sans-serif stacks by default. Override in layout.tsx:

TSX

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });

Apply className={inter.variable} on <html> and set font-sans in Tailwind config.

Dark mode

The default theme is dark. Components assume a dark canvas background. If you add light mode later, use Tailwind's darkMode: "class" and swap token values under a .light class.

Component overrides

Because components are copied into your project, you can edit styles directly. Prefer changing shared tokens over patching individual components.

PreviousButton