creative-tim-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Creative Tim UI

A comprehensive block library built on top of shadcn/ui, with 390+ production-ready blocks across 40+ categories. All blocks are React + Tailwind CSS, compatible with Next.js (App Router), Remix, and Vite.

Browse the full library: https://www.creative-tim.com/ui AI-readable index: https://www.creative-tim.com/ui/llms.txt

这是一个基于shadcn/ui构建的全面组件库，包含40多个分类下的390多个可直接用于生产环境的区块。所有区块均基于React + Tailwind CSS开发，兼容Next.js（App Router）、Remix和Vite。

浏览完整组件库：https://www.creative-tim.com/ui AI可读索引：https://www.creative-tim.com/ui/llms.txt

Install This Skill

安装此Skill

bash

undefined

bash

undefined

Install via skills CLI (recommended)

通过Skills CLI安装（推荐）

npx skills add creativetimofficial/ui

Install globally (available in all projects)

全局安装（可在所有项目中使用）

npx skills add creativetimofficial/ui -g

Or install to a specific agent only

或仅安装到指定Agent

npx skills add creativetimofficial/ui --agent claude-code


Skill page: **https://skills.sh/creativetimofficial/ui/creative-tim-ui**

npx skills add creativetimofficial/ui --agent claude-code


Skill页面：**https://skills.sh/creativetimofficial/ui/creative-tim-ui**

Design Philosophy

设计理念

Across 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else. That restraint is the core of the library.

When generating or modifying blocks, follow these principles:

The 95% Rule — build the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist. A developer should be able to read a block and immediately understand what it does.

The "Light" Principle — a block is finished when there is nothing left to remove, not when there is nothing left to add. Question every wrapper div, every prop, every animation, every icon. If the block works without it, it probably should.

Research before rendering — ask what the person looking at this screen is trying to do. A dashboard surfaces the number someone needs to act on. A form collects information with the least possible resistance. Design toward the purpose, not toward the surface.

Build on foundations — shadcn/ui primitives (

Card

Table

Button

Badge

) are well-designed and maintained. Compose them; don't reimplement them. The Creative Tim contribution is in the composition and the judgment, not in the primitives.

Real use, not demo use — the standard is: would a real team ship this in a production app? Avoid visual complexity that doesn't carry information. Communication beats decoration every time.

Full detail with code examples:

rules/brand-philosophy.md

在300多款产品和分类中，Creative Tim始终遵循同一准则：明确开发者的真实需求，精益求精地实现核心功能，剔除所有冗余内容。这种克制是本组件库的核心。

生成或修改区块时，请遵循以下原则：

95%原则 —— 极致满足通用场景需求。不为极少出现的问题添加配置、抽象或灵活性。开发者应该能一眼看懂区块的功能。

「轻量」原则 —— 当区块没有可移除的内容时，才算是完成。质疑每一个包裹div、每一个属性、每一个动画、每一个图标。如果移除后区块仍能正常工作，那它就应该被移除。

研究先行再实现 —— 思考用户查看此界面的真实目的。仪表盘要展示用户需要采取行动的关键数据；表单要以最低阻力收集信息。围绕目标设计，而非只关注表面视觉。

基于基础组件构建 —— shadcn/ui的基础组件（

Card

、

Table

、

Button

、

Badge

）设计精良且维护完善。请组合使用这些组件，而非重新实现。Creative Tim的贡献在于组件的组合和设计判断，而非基础组件本身。

面向实际使用而非演示 —— 评判标准是：真实团队会把这个区块部署到生产应用中吗？避免无信息价值的视觉复杂度。信息传达永远优先于装饰。

包含代码示例的完整细节：

rules/brand-philosophy.md

When to Apply

适用场景

Use this skill when:

Installing or customising a Creative Tim UI block in a project
Generating new blocks that should match Creative Tim's design system
Reviewing generated UI code for brand/style compliance
Setting up PRO API key access for premium blocks
Onboarding a new project to use the Creative Tim UI library

在以下场景中使用本Skill：

在项目中安装或自定义Creative Tim UI区块
生成符合Creative Tim设计系统的新区块
审查生成的UI代码是否符合品牌/风格规范
配置PRO API密钥以访问付费区块
为新项目接入Creative Tim UI组件库

Block Categories

区块分类

Category	Slug	Description
AI Agents	`ai-agents`	Chat interfaces, activity feeds, tool use, transcription
Pages	`pages`	Full-page agent management layouts
Account	`account`	Profile, settings, billing management
Authentication	`authentication`	Login, register, 2FA flows
Hero	`hero`	Landing page hero sections
Pricing	`pricing`	Pricing tables and billing plans
Charts	`charts`	Data visualisation
KPI	`kpi`	Metric cards and dashboards
Stats	`stats`	Statistics sections
Tables	`table`	Data tables with sorting/filtering
Ecommerce	`ecommerce`	Product listings, carts, checkout
Blog	`blog`	Article lists, post layouts
Testimonials	`testimonials`	Social proof sections
...		[Full list at /ui/llms.txt]

分类	标识	描述
AI Agents	`ai-agents`	聊天界面、活动流、工具调用、文字转录
页面	`pages`	完整的Agent管理布局页面
账户	`account`	个人资料、设置、账单管理
身份验证	`authentication`	登录、注册、双因素认证流程
首屏横幅	`hero`	着陆页首屏横幅区域
定价	`pricing`	定价表格和计费方案
图表	`charts`	数据可视化
关键绩效指标	`kpi`	指标卡片和仪表盘
统计数据	`stats`	统计数据区域
表格	`table`	支持排序/筛选的数据表格
电商	`ecommerce`	产品列表、购物车、结账流程
博客	`blog`	文章列表、文章详情布局
客户评价	`testimonials`	社交证明区域
...		[完整列表请查看/ui/llms.txt]

Installing Blocks

安装区块

Two methods are fully supported — choose whichever fits your setup.

我们完全支持两种安装方式——选择适合你项目的方式即可。

Option 1 — Creative Tim CLI (recommended)

方式1 — Creative Tim CLI（推荐）

bash

npx @creative-tim/ui@latest add <block-name>

Initialize a new project first (auto-detects Next.js / Vite / Remix / Astro):

bash

npx @creative-tim/ui@latest init

Examples:

bash

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

The package also ships named binaries (

creative-tim-ui

creative-tim

) — same commands:

bash

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

bash

npx @creative-tim/ui@latest add <block-name>

请先初始化新项目（自动检测Next.js / Vite / Remix / Astro）：

bash

npx @creative-tim/ui@latest init

示例：

bash

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

该包还提供了命名二进制文件（

creative-tim-ui

、

creative-tim

）——命令用法相同：

bash

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

Option 2 — shadcn CLI (full URL)

方式2 — shadcn CLI（完整URL）

bash

npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json

Example:

bash

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

Both methods copy the component source into your project and install all required shadcn/ui primitives (Button, Card, Badge, etc.) automatically.

bash

npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json

示例：

bash

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

两种方式都会将组件源码复制到你的项目中，并自动安装所有所需的shadcn/ui基础组件（Button、Card、Badge等）。

PRO Blocks (API Key)

PRO付费区块（API密钥）

Some blocks are marked PRO and require a Creative Tim API key. You can get a free key at https://www.creative-tim.com/ui.

部分区块标记为PRO，需要Creative Tim API密钥。你可以在**https://www.creative-tim.com/ui**免费获取密钥。

Setup

配置步骤

Add the key to your environment:

bash

undefined

将密钥添加到环境变量中：

bash

undefined

.env.local

CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx


Pass the key when using either CLI:
```bash

CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx


使用任意CLI时传入密钥：
```bash

Creative Tim CLI

npx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY

shadcn CLI — set Authorization header via registry config

shadcn CLI — 通过注册表配置设置Authorization请求头


Or set it globally via the Creative Tim CLI config:
```bash
npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

After setting the key, PRO blocks install identically to free blocks.


或者通过Creative Tim CLI全局配置密钥：
```bash
npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

配置密钥后，PRO付费区块的安装流程与免费区块完全一致。

Design Rules

设计规范

See individual rule files for full detail. Quick summary:

完整规则请查看单个规则文件。以下是快速总结：

Brand Colors

品牌色彩

Primary accent: orange (
```
orange-500
```
/
```
orange-600
```
) — Creative Tim's brand color
Never use
```
violet
```
,
```
purple
```
, or
```
indigo
```
as accent colors — these signal AI-generated defaults
Neutral surfaces:
```
slate
```
,
```
gray
```
,
```
zinc
```
Status:
```
emerald
```
(success),
```
amber
```
(warning),
```
red
```
(error),
```
blue
```
(info)

主强调色：橙色（
```
orange-500
```
/
```
orange-600
```
）—— Creative Tim的品牌色
切勿使用
```
violet
```
、
```
purple
```
或
```
indigo
```
作为强调色——这些是AI生成内容的默认颜色
中性背景色：
```
slate
```
、
```
gray
```
、
```
zinc
```
状态色：
```
emerald
```
（成功）、
```
amber
```
（警告）、
```
red
```
（错误）、
```
blue
```
（信息）

Typography

排版

text-sm
for all readable body content — labels, descriptions, table cells, list items
```
text-xs
```
only for: avatar initials,
```
font-mono
```
timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttons
Never use
```
text-[10px]
```
,
```
text-[11px]
```
, or any arbitrary font-size values

text-sm
用于所有可读正文内容——标签、描述、表格单元格、列表项
```
text-xs
```
仅用于：头像首字母、
```
font-mono
```
时间戳、状态/优先级徽章、侧边栏分组标题（大写+加宽字距）、小型h-6/h-7操作按钮
切勿使用
```
text-[10px]
```
、
```
text-[11px]
```
或任意自定义字体大小值

Tailwind v4 — No Arbitrary Values

Tailwind v4 — 禁止使用任意值

Use the numeric scale for spacing/sizing:
```
h-8
```
,
```
w-12
```
,
```
gap-3
```
,
```
p-4
```
— never
```
h-[32px]
```
Use standard fractions for widths:
```
max-w-sm
```
,
```
max-w-2xl
```
,
```
w-1/2
```
— never
```
max-w-[85%]
```
Responsive breakpoints only:
```
sm:
```
,
```
md:
```
,
```
lg:
```
,
```
xl:
```
— never
```
[@media(min-width:640px)]:
```

使用数值比例设置间距/尺寸：
```
h-8
```
、
```
w-12
```
、
```
gap-3
```
、
```
p-4
```
——切勿使用
```
h-[32px]
```
使用标准宽度类：
```
max-w-sm
```
、
```
max-w-2xl
```
、
```
w-1/2
```
——切勿使用
```
max-w-[85%]
```
仅使用官方响应式断点：
```
sm:
```
、
```
md:
```
、
```
lg:
```
、
```
xl:
```
——切勿使用
```
[@media(min-width:640px)]:
```

Component Patterns

组件模式

Prefer
```
Card > CardHeader + CardContent
```
for content grouping
KPI / stat cards:
```
CardContent className="px-4 py-0"
```
(py-0, not default py-6)
Use
```
ScrollArea
```
for any list that can overflow
Sidebar navigation: 64 (
```
w-64
```
), border-r,
```
bg-muted/30
```
Avoid inline
```
style={{}}
```
— always use Tailwind classes

优先使用
```
Card > CardHeader + CardContent
```
进行内容分组
KPI / 统计卡片：
```
CardContent className="px-4 py-0"
```
（内边距上下为0，而非默认的py-6）
对任何可能溢出的列表使用
```
ScrollArea
```
侧边栏导航：宽度64（
```
w-64
```
）、右侧边框、
```
bg-muted/30
```
避免使用内联
```
style={{}}
```
——始终使用Tailwind类

Hydration Safety

Hydration安全

Never use

new Date()

Date.now()

, or

toLocaleTimeString()

useState

initializers

Use static/hardcoded strings for SSR-safe initial state; switch to live values inside
```
useEffect
```
/
```
setInterval
```

切勿在

useState

初始化器中使用

new Date()

、

Date.now()

或

toLocaleTimeString()

为SSR安全的初始状态使用静态/硬编码字符串；在
```
useEffect
```
/
```
setInterval
```
中切换为动态值

Full Design Guide

完整设计指南

For the complete rules with code examples:

AGENTS.md

Individual rules:

rules/install-blocks.md     — CLI install walkthrough
rules/pro-api-key.md        — PRO key setup and auth
rules/design-brand.md       — Brand colors and identity
rules/tailwind-rules.md     — Tailwind v4 coding constraints
rules/component-patterns.md — Preferred component patterns
rules/hydration-safety.md   — SSR/CSR hydration rules

包含代码示例的完整规则：

AGENTS.md

单个规则文件：

rules/install-blocks.md     — CLI安装指南
rules/pro-api-key.md        — PRO密钥配置与认证
rules/design-brand.md       — 品牌色彩与标识
rules/tailwind-rules.md     — Tailwind v4编码约束
rules/component-patterns.md — 推荐组件模式
rules/hydration-safety.md   — SSR/CSR Hydration规则

Deploying This Skill

部署本Skill

This skill lives in the repo at

.claude/skills/creative-tim-ui/

. Anyone can install it in their own Claude Code setup by running:

bash

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

Or by cloning and symlinking manually:

bash

undefined

本Skill位于仓库的

.claude/skills/creative-tim-ui/

目录下。任何人都可以通过以下命令将其安装到自己的Claude Code环境中：

bash

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

或者通过克隆并手动创建符号链接：

bash

undefined

Clone or copy the skills directory into your project

将Skills目录克隆或复制到你的项目中

cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui


Once installed the skill is available as `/creative-tim-ui` in any Claude Code session inside that project.

cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui


安装完成后，在该项目的任何Claude Code会话中，都可以通过`/creative-tim-ui`调用本Skill。