ByteNote

Tremor 是一个开源的 React 组件库，提供 35+ 个可定制、无障碍访问的组件，用于构建仪表盘和现代 Web 应用。该项目基于 Tailwind CSS 和 Radix UI 构建，采用 Copy & Paste 的设计理念，让开发者可以轻松地将组件集成到项目中。

项目简介

Tremor 由 Tremor Labs 开发维护，截至目前在 GitHub 上已获得 3,265+ stars 和 136 forks。项目采用 Apache License 2.0 开源协议，主要使用 TypeScript 编写（占比 99.1%）。

Tremor 的设计理念是提供即插即用的组件，开发者可以直接复制粘贴代码到项目中，无需安装额外的 npm 包（当然也可以通过 npm 安装）。这种方式给开发者带来了极大的灵活性，可以根据需要自由修改组件源码。

核心特性

35+ 组件：涵盖数据可视化、表单输入、UI 元素等多种类型
基于 Tailwind CSS：完全利用 Tailwind 的实用类进行样式设计
基于 Radix UI：底层使用 Radix UI 提供无障碍访问支持
TypeScript 支持：完整的类型定义，提供优秀的开发体验
Copy & Paste 模式：无需依赖，直接复制代码即可使用
响应式设计：所有组件都支持移动端和桌面端
深色模式：内置支持 dark mode 切换

组件分类

数据可视化 (Visualizations)

Area Chart - 面积图
Bar Chart - 柱状图
Combo Chart - 组合图
Bar List - 条形列表
Category Bar - 分类条形图
Donut Chart - 环形图
Line Chart - 折线图
Progress Bar - 进度条
Progress Circle - 环形进度
Spark Chart - 迷你图
Tracker - 追踪器

表单输入 (Inputs)

Calendar - 日历
Checkbox - 复选框
Date Picker - 日期选择器
Date Range Picker - 日期范围选择器
Dropdown Menu - 下拉菜单
Input - 输入框
Label - 标签
Radio Card/Group - 单选卡片/组
Select - 选择器
Slider - 滑块
Switch - 开关
Textarea - 文本域
Toggle - 切换按钮

UI 组件

Accordion - 手风琴
Badge - 徽章
Button - 按钮
Callout - 提示框
Card - 卡片
Dialog - 对话框
Divider - 分隔线
Drawer - 抽屉
Popover - 气泡卡片
Table - 表格
Tabs/TabNavigation - 标签页
Toast - 轻提示
Tooltip - 文字提示

技术栈

React 18+ - 核心框架
TypeScript - 类型系统
Tailwind CSS - 样式框架
Radix UI - 无障碍组件基座
Recharts - 图表库（用于数据可视化组件）
Vite - 构建工具

安装指南

前置要求

Node.js >= 18
React >= 18
Tailwind CSS >= 3

安装步骤

方式一：Copy & Paste（推荐）

访问 Tremor 官方文档
找到需要的组件
复制组件代码到项目中
根据需要自定义样式

方式二：npm 安装

bash

# 安装 tremor 包
npm install @tremor/react

# 或使用 yarn
yarn add @tremor/react

# 或使用 pnpm
pnpm add @tremor/react

配置 Tailwind CSS

在 tailwind.config.js 中添加 Tremor 配置：

javascript

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... 你的内容配置
    './node_modules/@tremor/react/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        tremor: {
          brand: {
            faint: '#eff6ff',
            muted: '#bfdbfe',
            subtle: '#60a5fa',
            DEFAULT: '#3b82f6',
            emphasis: '#1d4ed8',
            inverted: '#ffffff',
          },
          background: {
            muted: '#f9fafb',
            subtle: '#f3f4f6',
            DEFAULT: '#ffffff',
            emphasis: '#374151',
          },
          border: {
            DEFAULT: '#e5e7eb',
          },
          ring: {
            DEFAULT: '#e5e7eb',
          },
          content: {
            subtle: '#9ca3af',
            DEFAULT: '#6b7280',
            emphasis: '#374151',
            strong: '#111827',
            inverted: '#ffffff',
          },
        },
      },
    },
  },
  plugins: [],
}

快速开始

基础用法示例

tsx

import { Card, Title, BarChart } from '@tremor/react'

const data = [
  { name: '一月', 销售额: 4000 },
  { name: '二月', 销售额: 3000 },
  { name: '三月', 销售额: 2000 },
  { name: '四月', 销售额: 2780 },
  { name: '五月', 销售额: 1890 },
]

export default function Dashboard() {
  return (
    <Card>
      <Title>月度销售额</Title>
      <BarChart
        data={data}
        index="name"
        categories={['销售额']}
        colors={['blue']}
      />
    </Card>
  )
}

仪表盘布局示例

tsx

import { Grid, Col, Card, Title, Text, Metric } from '@tremor/react'

export default function Dashboard() {
  return (
    <Grid numItems={1} numItemsSm={2} numItemsLg={3} className="gap-4">
      <Card>
        <Title>总用户</Title>
        <Metric>12,345</Metric>
        <Text>+12% 较上月</Text>
      </Card>
      <Card>
        <Title>收入</Title>
        <Metric>$45,231</Metric>
        <Text>+8% 较上月</Text>
      </Card>
      <Card>
        <Title>订单</Title>
        <Metric>1,234</Metric>
        <Text>+23% 较上月</Text>
      </Card>
    </Grid>
  )
}

使用场景

场景 1：数据分析仪表盘

Tremor 的数据可视化组件非常适合构建数据分析仪表盘：

tsx

import { Card, Title, AreaChart, BarList } from '@tremor/react'

const chartData = [
  { date: '2024-01', 访问量: 2890, 转化: 120 },
  { date: '2024-02', 访问量: 2756, 转化: 150 },
  { date: '2024-03', 访问量: 3322, 转化: 200 },
]

const categoryData = [
  { name: '电子产品', value: 1200 },
  { name: '服装', value: 800 },
  { name: '食品', value: 600 },
]

export default function AnalyticsDashboard() {
  return (
    <>
      <Card>
        <Title>访问趋势</Title>
        <AreaChart
          data={chartData}
          index="date"
          categories={['访问量', '转化']}
          colors={['indigo', 'rose']}
        />
      </Card>
      <Card className="mt-4">
        <Title>品类分布</Title>
        <BarList data={categoryData} />
      </Card>
    </>
  )
}

场景 2：管理后台表单

使用 Tremor 的表单组件快速构建管理后台：

tsx

import { Card, Title, TextInput, Select, Button } from '@tremor/react'

export default function UserForm() {
  return (
    <Card>
      <Title>创建用户</Title>
      <div className="space-y-4 mt-4">
        <TextInput placeholder="用户名" />
        <TextInput placeholder="邮箱" type="email" />
        <Select>
          <option value="admin">管理员</option>
          <option value="user">普通用户</option>
        </Select>
        <Button>保存</Button>
      </div>
    </Card>
  )
}

注意事项

Tailwind CSS 版本：确保使用 Tailwind CSS 3.0 或更高版本
React 版本：需要 React 18 或更高版本
深色模式：如需使用深色模式，需要额外配置 darkMode: 'class'
字体：建议使用 Inter 字体以获得最佳视觉效果
Vercel 收购：Tremor 已于 2024 年被 Vercel 收购，未来发展值得期待

总结

Tremor 是一个功能丰富、设计精美的 React 组件库，特别适合需要快速构建仪表盘和数据可视化界面的项目。其 Copy & Paste 的设计理念让开发者可以灵活地定制组件，而基于 Tailwind CSS 和 Radix UI 的架构则保证了样式的一致性和无障碍访问支持。如果你正在寻找一个现代化的 React UI 组件库，Tremor 值得一试。

字节笔记本

Tremor - 基于 Tailwind CSS 的 React 组件库