Getting Started

Set up TetrisUI in a new or existing project in under 2 minutes.

Prerequisites

React 18+ or 19
Tailwind CSS 3.4+
Node.js 18+

1. Install the package

Terminal

bash

pnpm add @doss/tetris-ui

Also works with npm, yarn, or bun.

2. Configure Tailwind

Add the TetrisUI preset to your Tailwind config. This registers all design tokens, custom font sizes, colors, shadows, and animations.

tailwind.config.ts

tsx

import type { Config } from "tailwindcss";
import { tetrisPreset } from "@doss/tetris-ui/tailwind-config";

const config: Config = {
  presets: [tetrisPreset],
  content: [
    "./app/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./node_modules/@doss/tetris-ui/dist/**/*.{js,mjs}",
  ],
};

export default config;

3. Import design tokens

Import the CSS custom properties that power the entire token system. This gives you dark mode, all color scales, and typography variables.

app/globals.css

css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "@doss/tetris-ui/tokens.css";

4. Use components

app/page.tsx

tsx

import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@doss/tetris-ui";

export default function Page() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Integration Status</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-2">
          <Badge variant="success">Connected</Badge>
          <span>QuickBooks Online</span>
        </div>
        <Button className="mt-4">Sync Now</Button>
      </CardContent>
    </Card>
  );
}

Theming

TetrisUI is CSS-variable-driven. Override any --ds-* token to customize the entire system. Common overrides:

Custom theme

css

:root {
  /* Change the accent color */
  --ds-blue-700: hsl(272, 51%, 54%);  /* purple */
  --ds-blue-900: hsl(272, 60%, 72%);  /* purple text */

  /* Change the radius */
  --ds-radius: 8px;

  /* Change the ring color */
  --ds-ring: hsl(272, 51%, 54%);
}

For a full list of tokens, see the Tokens reference. Use the Customize button in the header to preview changes live.

Dark / Light Mode

Dark mode is the default. Add the .light class or [data-theme="light"] attribute to switch to light mode. All tokens adapt automatically.

Mode switching

html

<html class="light">  <!-- light mode -->
<html>              <!-- dark mode (default) -->

What's included

Component files

Pre-composed blocks

Theme axes

Ontology entries

Next steps

Browse all components

Interactive demos with code examples for every component.

Explore blocks

Pre-composed patterns: login forms, dashboards, invoices.

Try the playground

Full operations dashboard built entirely from TetrisUI.

View the ontology

Component dependency graph and composition relationships.