项目概述

Tetra UI 是一个基于 Tailwind CSS 和 Radix UI 底层逻辑构建的现代 React UI 组件库。它融合了精炼的视觉美学、严格的 WAI-ARIA 无障碍规范与一流的暗黑模式支持，致力于为企业级应用与 SaaS 产品提供坚实可靠的界面底座。

核心特性

♿ 出厂即享 WAI-ARIA 无障碍支持：基于 Radix UI 无头基建，原生保障屏幕阅读器兼容与全键盘焦点导航无障碍交互。
🎨 标准 Design Tokens 设计系统：通过标准 Tailwind 配置与 CSS 变量自由调节色彩阶梯、圆角与投影层级。
🌓 深度无缝的暗黑模式：全量组件均经过严格的对比度校验与微交互调优，在深浅色模式间丝滑切换。
📦 灵活的复用方式：支持通过 npm 包统一引入或按需源码拷贝 (Copy-Paste) 至项目进行深度定制。

快速上手与示例代码

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">欢迎登录</h2>
      <Input placeholder="请输入您的邮箱" type="email" />
      <Button variant="primary" className="w-full">立即登录</Button>
    </Card>
  );
}

技术选型建议与适用场景

企业级中后台与 SaaS 系统：兼具极简设计语言与高标准的无障碍合规性，大幅降低中后台交互打磨成本。
自研设计系统基座：适合希望在 Radix 与 Tailwind 之上快速衍生企业专属设计系统的研发团队。

Tetra UI

项目概述

核心特性

快速上手与示例代码

技术选型建议与适用场景

讨论与评价

相关组件推荐

8bitcn/ui

23rd

Duolingo UI (ShadLingo)