SuperAPI AI 工具集

tremor-design-system

设计与创作

查看项目

更新于 10-15 21:41

技能介绍

用途:使用 Tremor 的 React 组件库构建生产级仪表盘与分析界面。

版本识别:Tremor 有两种分发模式,写代码前需先确认项目所用版本。Tremor Raw(tremor.so)为复制粘贴组件,导入形如 import { AreaChart } from "@/components/AreaChart",依赖 Tailwind CSS v4+、Radix UI、Recharts,使用标准 Tailwind 工具类。Tremor NPM(npm.tremor.so)为 @tremor/react 包,依赖 Tailwind CSS v3.4+、Headless UI、Remix Icons,使用 Tremor 专有 token。若无法判断可询问用户;新项目默认使用 Tremor Raw,因其为活跃开发版本(2025 年 1 月被 Vercel 收购)。

工作流:确定版本 → 识别模式 → 选择组件 → 组合 → 按版本应用 Tailwind 样式。

主要能力与原则:Card 为基本单元,几乎所有仪表盘区块都包裹在 Card 中;使用 Tailwind grid 实现响应式布局,避免硬编码宽度;所有图表组件接收对象数组,index 指定 x 轴键,categories 指定数据系列;展示货币、百分比或单位时应提供 valueFormatter,数字格式化可用 Intl.NumberFormat;组件支持暗色模式,Raw 用 dark: 前缀,NPM 用 dark-tremor-* token;图表使用浏览器 API,在 Next.js App Router 中需标记 "use client"。

图表选择:趋势用 AreaChart/LineChart,分类比较用 BarChart,占比用 DonutChart,排行用 BarList,预算/阈值用 CategoryBar,组合指标用 ComboChart,内联迷你图用 SparkAreaChart/SparkLineChart/SparkBarChart,目标进度用 ProgressBar/ProgressCircle,状态历史用 Tracker。

限制:具体组件 API 与仪表盘组合模式需参考其 references/component-catalog.md 与 references/dashboard-patterns.md;收费、价格与平台信息暂未提供。