文档/快速开始

快速开始

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

Node 20+pnpm 9+Next.js 16+React 19+Tailwind v4GitHub org access

FREE · MIT先试试免费版？1 行命令搞定，无需 PAT

@forge-ui-official/core 含 30+ 原子组件（Button、TextField、Tooltip、Datepicker、Pagination 等），MIT license，发到公共 npm。直接装就能用：

1pnpm add @forge-ui-official/core

下面是 Pro 版（@forge-ui/react）安装步骤，含 DataTable Pro · 全部 Calendar · 16 个 Charts · 17 个业务 Card · AppLayout · 所有 case 页。加入早鸟名单。

新建 .npmrc

项目根目录加一份 .npmrc，告诉 pnpm @forge-ui 这个 scope 要去 GitHub Packages 拉。

1@forge-ui:registry=https://npm.pkg.github.com
2//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

去 GitHub 生成一个带 read:packages 权限的 classic PAT，丢进 shell 再装包。

1export GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxx
2pnpm add @forge-ui/react

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

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

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

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

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

1curl -fsSL https://forge-mu-amber.vercel.app/install-skill.sh | bash