文档/快速开始

快速开始

5 分钟把 @forge-ui-official/core 接进 Next.js 16 + Tailwind v4 项目。

Node 20+pnpm 9+Next.js 16+React 19+Tailwind v4

安装 @forge-ui-official/core

组件包公开发布，直接从 npm 安装即可。

1pnpm add @forge-ui-official/core

在 app/globals.css 顶部加这三行：引入 Tailwind、引入 Forge 的 token 样式、让 Tailwind v4 扫到 Kit 组件产物里的 utility class。

1@import "tailwindcss";
2@import "@forge-ui-official/core/styles.css";
3@source "../../node_modules/@forge-ui-official/core/dist";

pnpm dev 跑起来，页面上看到紫色胶囊按钮就通了。

1import { Button } from "@forge-ui-official/core";
2 
3export default function Page() {
4  return <Button>Hello Forge</Button>;
5}

让 Claude Code / Cursor / Codex 看懂 Forge 的规矩——组件从 @forge-ui-official/core 拿、颜色走 fg-* token、icon 走 solar-icon-set，不再手搓 div 复刻组件。装完重启一下 agent。

1curl -fsSL https://forgeui.org/install-skill.sh | bash