Tinyrack

React 19Base UI61 components

TINYRACKDESIGN SYSTEM

Accessible React UI for dashboards and internal tools.

01 / System

Move from design rules to product UI.

Tinyrack connects semantic tokens, light and dark themes, and documented component contracts.

Semantic tokens

Use shared color, type, spacing, and elevation roles across product surfaces.

Explore foundations

Theme-aware UI

Keep the same component intent when a surface switches between light and dark.

View colors and themes

Component contracts

Build on public React APIs with documented states, behavior, and accessibility.

Browse components
02 / Components

Build familiar product flows.

Use the same interaction patterns for forms, selection, status, and feedback.

Browse all components
03 / Start

Start with the complete setup.

Preview the package and component API here. The installation guide covers Vite, styles, and theme setup.

Follow the installation guide
pnpm add @tinyrack/ui react react-dom
import { TRButton } from '@tinyrack/ui/components/button';

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

Continue with the right level of detail.

Choose the path that matches what you want to build next.

Installation

Install Tinyrack UI in an existing React and Vite project.

Installation

Foundations

Understand the visual and interaction rules behind the system.

Foundations

Components

Review component APIs, states, examples, and accessibility guidance.

Components

GitHub

Read the source, open an issue, or contribute on GitHub.

GitHub