Installation · Tinyrack Design System

Set up Tinyrack UI in a React 19 application with Tailwind CSS 4.3 or later, before Tailwind 5, and render a themed primary action. You need an existing Vite React application and Node.js 24 or later.

1. Install the packages

pnpm add @tinyrack/ui react react-dom

2. Add Tailwind CSS to Vite

Install @tailwindcss/vite as a development dependency, then add the real Tailwind Vite plugin to your configuration.

pnpm add -D tailwindcss@^4.3.0 @tailwindcss/vite@^4.3.0

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. Import styles in order

Import Tailwind CSS first. Then import core.css once in the global entry point, before every component stylesheet. Component JavaScript does not load its CSS automatically.

@import "tailwindcss";
@import "@tinyrack/ui/core.css";
@import "@tinyrack/ui/components/button.css";

4. Select a theme

Set data-theme="tinyrack-light" on the document root. Tinyrack UI also provides tinyrack-dark for dark interfaces.

core.css paints html and body with the selected theme's --tinyrack-surface and --tinyrack-text colors. Add a later application CSS rule when the page canvas needs a different treatment.

<html data-theme="tinyrack-light">

5. Render a primary action

Import components from their public subpaths and express action meaning with intent.

import { TRButton } from '@tinyrack/ui/components/button';

export function DeployButton() {
  return <TRButton intent="primary">Deploy changes</TRButton>;
}

Check the result

Start the Vite development server. The button should use the light theme, show the primary treatment, and retain a visible keyboard focus indicator. If it is unstyled, check that core.css comes before button.css.

Continue with Foundations to understand the system rules, or browse the Button guide to build the interface.

Enforce the design system in CI

Run the checker included with @tinyrack/ui against production files in src and app:

pnpm exec tinyrack-ui-check
pnpm exec tinyrack-ui-check --format=github

The command rejects literal visual values, default Tailwind design utilities such as p-4, private Tinyrack imports, native controls with a public TR equivalent, and missing foundation or component CSS. Use Tinyrack utilities such as p-tinyrack-md and public tokens instead. It exits with 1 for a violation and 2 when configuration or source parsing fails.

Add tinyrack.check.json at the project root to replace the default paths:

{
  "include": ["packages/client/src/**"],
  "exclude": ["packages/client/src/generated/**"]
}

There is no baseline mode. For a structural value that cannot be expressed by a design token, add a rule-specific next-line suppression with a reviewable reason:

/* tinyrack-check-ignore-next-line tokens/no-literal -- coordinate comes from the chart data */
.plot-origin { left: 12px; }