v1.0.2Open Source

Tac UI

A cross-platform design system built with shared tokens, React components, and comprehensive theming. Ship consistent, minimal, and structural UIs faster.

Brand Identity

Tac UI is a precision instrument — clean, structural, and strictly modern minimalist. Every surface has purpose, every edge is definitive, and every interaction asserts physical, tactile weight.

Design Philosophy: "Clean & Modern Minimalist"

Moving away from distracting glows and convoluted overlays, Tac UI embraces crisp borders and high-contrast typography. Focus states fit tightly (`ring-offset-0`), and surfaces are grounded with pure solids or subtle structural shadows instead of excessive glassmorphism.

Pristine Architecture

Components utilize distinct 1px solid structural borders (`var(--border)`) seamlessly wrapping standard standard element variants. This establishes an unapologetically sharp, technical UI built for productivity without cognitive noise.

focus-visible

ring-offset-0

borders

1px solid structural

motion

snappy spring scaling

Typography & Hierarchy

We rely heavily on precise typographic metrics. Headings utilize tight tracking (`tracking-tight`), while subtexts and descriptions embrace strict leading limits (`leading-tight`) to ensure clean rectangle bounding constraints around elements.

Motion: Spring Physics

UI elements have mass and momentum. Interactive buttons scale securely down on press. Heavy overlays like modals enter quickly with structured deceleration.

Accessibility

Consistent semantic tokens mapping right into strictly compliant CSS variables ensures WCAG AA text visibility. Zero-gap focus rings (`ring-[var(--point)]`) visibly lock onto elements upon keyboard iteration.

Features

Design Tokens

Shared color, spacing, typography, and motion tokens across platforms.

40+ Components

Production-ready React components with full TypeScript support.

Dark Mode

Built-in light and dark themes via CSS custom properties.

Accessibility

Focus trapping, keyboard navigation, and ARIA attributes built in.

Charts

Pure SVG chart components that consume your design tokens.

Layout System

9 pre-composed page layout patterns for rapid scaffolding.

Quick Start

Install the packages and wrap your app with the provider.

bash

# Install
npm install @tac-ui/web @tac-ui/tokens

# or with pnpm
pnpm add @tac-ui/web @tac-ui/tokens

Usage

Import components and use them with full TypeScript IntelliSense.

tsx

import { TacProvider, Button } from '@tac-ui/web';

export default function App() {
  return (
    <TacProvider>
      <Button variant="primary">Click me</Button>
    </TacProvider>
  );
}