Skip to content
Tennantite
中文
Documentation

Installation

Add styles and components to a React 19 + Tailwind v4 project.

Prerequisites

  • Node.js ≥ 26
  • pnpm 12
  • React 19.2.8 (peer range ^19.2.0; 19.3 has a known prerender issue with Next 16)
  • Tailwind CSS v4

Use the shadcn CLI to copy component source into your project and adapt it — the shadcn/ui workflow.

$npx shadcn init

Add this project’s registry to the generated components.json:

{
  "registries": {
    "@tennantite": "https://tennantite.rikka.cc/r/{name}.json"
  }
}

Then install the base assets and components:

$npx shadcn add @tennantite/tennantite-base @tennantite/button

What the CLI install does

  • The tennantite-base item installs the two L0 asset packages @tennantite/tokens and @tennantite/textures, and drops a base.css recording the asset CSS to import.
  • Component source is copied to components/tennantite/<component>/; cross-component dependencies (registryDependencies) are pulled in automatically.
  • Internal imports are rewritten to the @/components/tennantite/... alias plus shared utilities under components/tennantite/lib/ (cn, gui, screen types); your existing @/lib/utils is never touched.

Option 2: Install from npm

$pnpm add @tennantite/ui @tennantite/tokens @tennantite/textures

Wire up styles

Import the packages in this order from your Tailwind entry CSS:

@import "tailwindcss";
@import "@tennantite/tokens/css/tokens.css";
@import "@tennantite/textures/css/textures.css";
@import "@tennantite/ui/css/scroll-area.css";

/* Let Tailwind scan package class names; paths are relative to this CSS file. */
@source "../node_modules/@tennantite/ui/dist";

body {
  background-color: #1f1f1f;
  color: var(--color-mc-text-main);
  font-family: var(--font-mc);
  font-size: var(--text-mc);
}

The @source path must be relative to the current CSS file; adjust it to your layout, otherwise Tailwind classes used inside components are not generated.

  • npm install: scan the package output node_modules/@tennantite/ui/dist.
  • CLI copy: scan the copied directory, e.g. @source "../../components/tennantite".

First component

With npm, import from the package:

import { Button, Panel } from "@tennantite/ui";

With the CLI copy, import from your local components:

import { Button } from "@/components/tennantite/button";
import { Panel } from "@/components/tennantite/panel";

export function StartPanel() {
  return (
    <Panel className="p-12">
      <Button variant="success">Start game</Button>
    </Panel>
  );
}

Frameworks

Components render safely on the server by default. The repo includes Next.js App Router and TanStack Start verification apps; the rsbuild playground is for quick iteration. See SSR / RSC for the exact constraints.

Troubleshooting

  • Missing classes: make sure @source covers node_modules/@tennantite/ui/dist.
  • Wrong spacing: --spacing is 2px, so w-20 is 40px, not 80px.
  • React version: stay on 19.2.8 to avoid the Next 16 prerender issue in 19.3.
  • Chinese glyphs: the pixel font covers Latin only; Chinese falls back through the token stack.