Tetra UI

Overview

Tetra UI is an accessible, modern React UI component library constructed on top of Tailwind CSS and Radix UI primitives. It offers polished enterprise components with refined typography, thoughtful focus rings, native dark mode support, and full keyboard navigation compliance.

Key Features

• ♿ WAI-ARIA Accessibility by Default: Radix-powered primitives guarantee full screen reader compatibility and keyboard traversal.
• 🎨 Unified Design Token System: Easily customize color palettes, border radii, shadows, and spacing using standard Tailwind CSS classes.
• 🌓 First-Class Dark Mode: Flawless contrast ratios and smooth transitions between light and dark themes across every single component.
• 📦 Copy-Paste & NPM Ready: Flexible integration options allowing developers to either install as a package or copy component code directly.

Installation & Quick Start

npm install @tetra-ui/react clsx tailwind-merge

import React from 'react';
import { Button, Input, Card } from '@tetra-ui/react';

export function LoginForm() {
  return (
    <Card className="max-w-sm p-6 space-y-4 shadow-xl border border-neutral-200 dark:border-neutral-800">
      <h2 className="text-xl font-bold text-neutral-900 dark:text-white">Welcome Back</h2>
      <Input placeholder="Enter your email" type="email" />
      <Button variant="primary" className="w-full">Sign In</Button>
    </Card>
  );
}

Why Choose Tetra UI?

• Enterprise Dashboards & SaaS: Clean visual design and rigid accessibility make it suitable for mission-critical web applications.
• Design System Foundation: Serves as a reliable starter kit for organizations building custom in-house React design systems.