Creative Tim UI

Creative Tim UI 是一个基于 shadcn/ui 构建的全面组件库，旨在帮助您更快地构建现代化 Web 应用程序。

概述

Creative Tim UI 提供了预构建、可定制的 React 组件和区块，专为构建美观且可直接投入生产的 Web 应用程序而设计。通过 CLI 工具，您可以轻松地将这些组件添加到您的 Next.js 项目中。

安装

您可以直接使用 npx 运行 Creative Tim UI 的 CLI，也可以将其全局安装：

# 直接使用（推荐）
npx @creative-tim/ui@latest add <组件名>

# 或者使用 shadcn cli
npx shadcn@latest add https://creative-tim.com/ui/r/all.json

先决条件

在使用 Creative Tim UI 之前，请确保您的 Next.js 项目满足以下要求：

• Node.js 18 或更高版本
• 项目中已初始化 shadcn/ui（运行 npx shadcn@latest init）
• 已配置 Tailwind CSS

使用方法

安装所有组件

您可以一次性安装所有可用的 Creative Tim UI 组件：

npx @creative-tim/ui@latest add all

该命令会执行以下操作：

• 如果尚未配置 shadcn/ui，则进行初始化
• 将所有 Creative Tim UI 组件安装到您配置的组件目录中
• 向项目中添加必要的依赖项

安装特定组件

您可以通过 components add 命令安装单个组件：

npx @creative-tim/ui@latest add <组件名>

示例：

# 安装 orb 组件
npx @creative-tim/ui@latest add card

替代方案：使用 shadcn CLI

您也可以使用标准的 shadcn/ui CLI 来安装组件：

# 安装所有组件
npx shadcn@latest add https://creative-tim.com/ui/r/all.json

# 安装特定组件
npx shadcn@latest add https://creative-tim.com/ui/r/button.json

所有可用组件都可以在 这里 找到，或者您也可以浏览示例区块列表 在这里。

区块

探索我们按类别组织的即用型区块集合。每个区块都完全可定制，只需一条命令即可添加到您的项目中。

应用程序 UI

模态框 5 个区块

账户页面 7 个区块

计费页面 5 个区块

营销

客户评价区块 17 个区块	联系我们区块 15 个区块	页脚区块 16 个区块
常见问题区块 6 个区块	博客文章区块 15 个区块

电子商务 UI

适用于产品列表、购物车和结账流程的即用型区块。

电子商务区块 14 个区块

Web 3.0

专为去中心化应用、区块链项目和加密货币平台打造的创新区块。

Web 3.0 卡片 5 个区块

贡献

如果您希望为 Creative Tim UI 做出贡献，请按照以下步骤操作：

1. Fork 本仓库
2. 创建新分支
3. 在注册表中对组件进行修改
4. 向主分支提交 PR

请阅读 贡献指南。

版权与许可

Creative Tim UI 基于开源社区的卓越工作构建而成：

• shadcn/ui - 文档结构、注册表系统以及基础（原子级）组件均源自 shadcn/ui 的开源成果。MIT 许可证
• Material Tailwind 由 Creative Tim 开发 - 模块和组件设计受到 Material Tailwind 框架的启发并以此为基础。MIT 许可证
• Eleven Labs UI - 文档结构及模块化方法的总体灵感来源。MIT 许可证
• Geist Font 由 Vercel 提供 - 整个界面中使用的精美字体。SIL 开源字体许可证 1.1

我们感谢这些项目以开源许可证开放其成果。

许可证

根据 MIT 许可证授权。

由 Creative Tim 精心打造。

Creative Tim UI 快速上手指南

Creative Tim UI 是一个基于 shadcn/ui 构建的综合组件库，旨在帮助开发者快速构建现代化的 Web 应用。它提供了大量可定制的 React 组件和页面区块（Blocks）。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• Node.js: 版本 18 或更高。
• 框架: 已初始化的 Next.js 项目。
• 前置依赖:
  • 项目中必须已初始化 shadcn/ui (npx shadcn@latest init)。
  • 已配置 Tailwind CSS。

安装步骤

你可以直接使用 npx 运行 CLI 工具，无需全局安装。

方式一：使用 Creative Tim 专用 CLI（推荐）

这是最便捷的方式，会自动处理依赖和配置。

安装所有组件：

npx @creative-tim/ui@latest add all

安装指定组件： 将 <component-name> 替换为你需要的组件名称（例如 card, button）。

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

方式二：使用 shadcn CLI

如果你习惯使用标准的 shadcn 命令，也可以通过 URL 直接添加：

安装所有组件：

npx shadcn@latest add https://creative-tim.com/ui/r/all.json

安装指定组件：

npx shadcn@latest add https://creative-tim.com/ui/r/button.json

基本使用

安装完成后，组件文件会被添加到你的项目目录中（通常在 components 文件夹下），你可以像使用本地组件一样直接导入和使用。

示例：使用 Card 组件

1. 安装组件：

   npx @creative-tim/ui@latest add card
   

2. 在代码中引入： 在你的 React 组件文件中导入并使用：

   import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
   
   export default function MyPage() {
     return (
       <Card>
         <CardHeader>
           <CardTitle>欢迎使用 Creative Tim UI</CardTitle>
         </CardHeader>
         <CardContent>
           <p>这是一个快速上手的示例卡片。</p>
         </CardContent>
       </Card>
     );
   }
   

使用页面区块 (Blocks)

除了基础组件，你还可以直接复用完整的页面区块（如导航栏、定价表、页脚等）。访问 官方文档 浏览分类（应用界面、营销页面、电商 UI 等），找到心仪的区块后，复制其安装命令即可一键集成到项目中。