# @cloudgrid-io/ui 中文文档 规范地址：https://npmcn.com/package/%40cloudgrid-io/ui/ 版本：0\.51\.1 npm 元数据更新时间：2026-11-10T02:29:14.261Z 中文译文更新时间：2026-11-10T03:13:21.279Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cloudgrid-io/ui 原文对照：https://npmcn.com/package/%40cloudgrid-io/ui/?lang=original 项目主页：https://github.com/cloudgrid-io/ui#readme 源码仓库：https://github.com/cloudgrid-io/ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：3.2 MB，654 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：9 个 - peer 依赖：react \>=18，react-is ^19，react-dom \>=18 - 首次发布：2026-08-20T09:35:34.229Z - 最新版本发布：2026-11-10T02:29:14.083Z - 近 30 天下载量：15789（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：70（近 12 个月 70 个） ## 中文简介 CloudGrid设计系统:反应组件,品牌设计标志,Tailwind主题 自管字体. ## 安装 ```sh npm install @cloudgrid-io/ui ``` 也可以使用：`pnpm add @cloudgrid-io/ui`、`yarn add @cloudgrid-io/ui`、`bun add @cloudgrid-io/ui` ## README # @cloudgrid-io/ui (英语) CloudGrid设计系统:CSS自定义属性,一个Tailwind v4主题,自发托管 字体,和机器可读JSON的同值. 47 反应组件,基于 [基础UI](https://base-ui.com/),仅通过符号样式 并且没有硬化的颜色. ## 安装 ```bash npm install @cloudgrid-io/ui ``` 三个字型家族随同来,都是自办的,所以没有要求字体 CDN在你的关键路径. ## 使用组件 ```tsx import { Button, Card, PricingTiers } from "@cloudgrid-io/ui" ``` 组件被编译,每个组件一个模块,并附有类型申报. 20号 那需要它保持他们的 `"use client"` 指令,所以一个 React 服务器组件应用程序得到 准确的客户端 线源声明. 反应是一种 **选项** 端点依赖性: 单独取出样式表, 无所取用 组件树. ## 导入 CSS, 按此顺序 ```css @import "tailwindcss"; @import "@cloudgrid-io/ui/fonts.css"; @import "@cloudgrid-io/ui/tokens.css"; @import "@cloudgrid-io/ui/console.css"; /* optional, see below */ @import "@cloudgrid-io/ui/theme.css"; @import "@cloudgrid-io/ui/shadcn.css"; ``` 命令很重要,而弄错了却悄悄的失败,而不是大声地失败了. - `theme.css` 将拖风式公用设备映射到符上。 在此之前 `tokens.css` 已经运行那里 没有任何地图,所以每个工具都会一无所获,而页面则会变成无样式 而不是错误. - `console.css` 是一个 **产品预设**,不是基地的一部分。 它重新宣告身体的脸 作为UI的面孔,曼罗佩, 并离开显示面 在坦克,作为云格丽德2026 Figma拥有它(# 371). CloudGrid Console是进口的,任何体型的产品都一样 类型是 UI 面相。 其他人都把线排出并保留默认值. 还有 将正文和标签大小设置为 14px ()`--cg-body-sm`, (中文(简体) ), `--cg-label-size`因此,每个 库中设置的正文文本匹配 Console 自己的 14px 文本; 标题保留 13px,没有预设的每个产品都保留了15px(#440). 这个 控制台的五个类型角色,作为标志: **体质** `text-body-sm` (14/1.46), (中文(简体) ), **体质粗体** `text-body-sm font-bold`, (中文(简体) ), **小型** `text-caption` (13起,1.46起), **H4级** `text-heading-lg font-medium` (22/1.2), (中文(简体) ), **标题** `font-display` (谭克. 一页 选择一个角色,而不是大小。 它必须坐着 **之后 `tokens.css`**,这就是它是什么 重新声明: 在前导入 `tokens.css` 默认的面孔以同样的特殊性胜出, 寂然无相. 它相对于 `theme.css` 没关系. `theme.css` 实值 `@theme inline`因此,它释放的公用事业是活的 `var()` 解决的参考文献 任何标志结束的地方, 和Tailwindhoists主题输出 之上的平面 CSS反正; 以 Tailwind 4 测量 , `console.css` 之前或之后 `theme.css` 编译字节-同. 上面的顺序仍然是推荐的,因为它保持了预设的旁边 他们改变的标志. - `shadcn.css` 一定要追寻什么 `:root` 你们自己 `shadcn init` 写着,因为 超过这些值。 早点放,股票灰色调色板获胜. 不使用控制台的脸: 跳过 `console.css` 线条。 不使用阴影: 跳过最后一行 。 不使用 Tailwind : `tokens.css` 一个人给你每一个 值作为自定义属性. ### 文献网站(星光) 文献网站不是Tailwind。 需要三张星光的样式表 `customCss`在此 顺序,并在一行中设置代码块: ```js import { cloudgridExpressiveCode } from "@cloudgrid-io/ui/expressive-code" starlight({ customCss: [ "@cloudgrid-io/ui/fonts.css", "@cloudgrid-io/ui/tokens.css", "@cloudgrid-io/ui/docs.css", ], expressiveCode: cloudgridExpressiveCode, }) ``` `docs.css` 地图星光 `--sl-*` 在符号上添加一些目标规则。 这个 只亮: 它的样式没有暗范围, 所以站点必须强制光主题并放下 主题拾取器( 覆盖星光) `ThemeProvider` 财务报告和审定财务报表 `ThemeSelect`) (中文(简体) ). 它必须来之后 `tokens.css`,其中每个值都读取. ## 将尾风指向包裹 尾风 v4 忽略 `node_modules` 当它扫描课堂时, 所以公用设施只在内部使用 从未生成组件 : ```css @source "../node_modules/@cloudgrid-io/ui/dist"; ``` 调整路径到您的布局 . **悄悄跳过此失败** ——建设成功,建设成功 页面生成,组件则未显示. ## 表面翻转 打开 `data-cg-surface` 在一个容器上 里面的每个语义符号 地面值。 边界、背景、焦点圈和内部组件紧随其后,没有 `dark:` 变体和无第二个样式表. ```html
``` 三面:默认白页, `panel` 在品牌紫色,和 `ink` 在近黑. **文字为例外.** 孩子们继承了他们的祖先已经决定的颜色 所以 设置的容器 `data-cg-surface` 还必须声明基于符号的文本颜色——即 什麽 `text-ink` 正在以上进行。 边界和背景自行翻转。 文本没有. 这里没有暗模式,这不能代替它。 黑暗的表面是一个 属性,绝不是页面级别的主题. ## 安装面板 每个CloudGrid安装面板都来自这个软件包,内容和设计. 没什么 已取来. ```tsx import { CloudGridInstall, INSTALL_PRESETS, installToolPreset } from "@cloudgrid-io/ui" // the whole panel ``` 所出之道具无所取. 页面选择屏幕上的内容( A)`tools`, (中文(简体) ), `methods`, (中文(简体) ), `defaultTool`, (中文(简体) ), `defaultMethod`, (中文(简体) ), `showFetchPrompt`, (中文(简体) ), `showFooter`,或一个 `preset`和什么只 它可以知道(选定的工具和方法、标题级别、一个继续动作)。 工具值 是稳定的识别器,可安全记录: `claude-code`, (中文(简体) ), `cursor`, (中文(简体) ), `codex`, (中文(简体) ), `antigravity`, (中文(简体) ), `gemini`, (中文(简体) ), `chatgpt`, (中文(简体) ), `claude-web`。 。 。 . `CloudGridFetchPrompt` 财务报告和审定财务报表 `CloudGridInstallFooter` 自己来 没有反应,就拿 字符串来自 `@cloudgrid-io/ui/install-content` (单位:千美元)`INSTALL_TOOLS`, (中文(简体) ), `INSTALL_COMMANDS` 编辑 ) (中文(简体). ## 入境点 | | | | --- | --- | | `@cloudgrid-io/ui/tokens.css` | 作为 CSS 自定义属性的每个值 | | `@cloudgrid-io/ui/console.css` | 产品预设:14px(label 14px)时将车体类型设定为Manrope,头条停留油轮 | | `@cloudgrid-io/ui/docs.css` | 产品预设:仅亮于星光文件站点,见下文 | | `@cloudgrid-io/ui/expressive-code` | docs 站点的代码块: 表达式代码主题和覆盖, 墨水上的单色 | | `@cloudgrid-io/ui/theme.css` | 将磁盘拖入符号 | | `@cloudgrid-io/ui/shadcn.css` | 将阴影变量映射到符号上 | | `@cloudgrid-io/ui/fonts.css` | 三个自理家庭 | | `@cloudgrid-io/ui/prose.css` | 长式文本 | | `@cloudgrid-io/ui/tokens.json` | 相同值,机器可读 | | `@cloudgrid-io/ui/install-content` | 安装内容为纯数据,无反应 | | `@cloudgrid-io/ui/email` | `renderEmail`: CloudGrid电子邮件布局,内容在, `{ html, text }` 出局,无反应 | | `@cloudgrid-io/ui/chart` | 阴影图( c)`ChartContainer`, (中文(简体) ), `ChartTooltip`, (中文(简体) ), `ChartTooltipContent`, (中文(简体) ), `ChartLegend`, (中文(简体) ), `ChartLegendContent`, (中文(简体) ), `ChartStyle`)在Recharts上,设置为库的默认值. 不在根导入中, 因此从不绘制图表的页面不会加载 Recharts | | `@cloudgrid-io/ui/line-chart` | `LineChart`:在上图上,在日期轴上一个或多个序列. 不在根导入中, 原因相同 | JSON设定在 `tokens/` 是DTCG,是编译CSS的来源. ## CloudGrid 文件符号 圆形正方形的套接字, 作为浏览器标签、 主屏幕或 网络清单。 两个颜色道: `mark` 是品牌标志(纯正方形、白胶片、什么) 网站用途)和 `mark-inverted` 白色并带有紫色的格子(控制台的标签使用). | | | | --- | --- | | `@cloudgrid-io/ui/brand/mark.svg` | 紫色SVG法维孔 | | `@cloudgrid-io/ui/brand/mark-inverted.svg` | 白色的 SVG 外观 | | `@cloudgrid-io/ui/brand/mark-32.png`, (中文(简体) ), `mark-inverted-32.png` | PNG favicon 倒计时 | | `@cloudgrid-io/ui/brand/mark-180.png`, (中文(简体) ), `mark-inverted-180.png` | `apple-touch-icon`满出血:iOS弹出 | | `@cloudgrid-io/ui/brand/mark-192.png`, (中文(简体) ), `mark-inverted-192.png` | 网络显示 | | `@cloudgrid-io/ui/brand/mark-512.png`, (中文(简体) ), `mark-inverted-512.png` | 网络显示 | 浏览器需要一个 URL, 所以复制到您的公共文件夹中, 或者通过您导入 捆绑: ```tsx // Next.js app router, e.g. app/layout.tsx import favicon from "@cloudgrid-io/ui/brand/mark-inverted.svg" import appleTouch from "@cloudgrid-io/ui/brand/mark-inverted-180.png" export const metadata = { title: "CloudGrid", icons: { icon: favicon.src, apple: appleTouch.src }, } ``` ```html ``` 在页面中,使用组件代替: ``绘制 同一常数的格言 `Logo`,并由此生成文件 恒定和品牌标志 `scripts/generate-brand-mark.mjs`,所以三个不能漂移. ## 空创建状态 新用户空状态用于列出某人的创作列表:一个破碎的盒子,一个扇子 缩略图环绕一个"+"平板,"尚未创建",一行和一个添加按钮. ```tsx import Link from "next/link" import { EmptyCreations } from "@cloudgrid-io/ui" ``` 字和四个缩略图来自包; `addLabel` 财务报告和审定财务报表 `previews` 覆盖 他们。 它以容器查询方式排列,因此符合所给出的宽度。 缩略图 包含在组件中,并作为文件运输,用于任何其他用途: `@cloudgrid-io/ui/brand/creations/1.webp` 改为 `4.webp` (164x94,每架2至5KB). 之后 替换文件,运行 `node scripts/generate-creation-previews.mjs`。 。 。 . ## 组件中的图片:嵌入或解析 两个组件运送相片,他们故意用两种方式进行. 一个新的组成部分 图片按此规则选择一个,而不是由作者最后读取的示例选择. - **嵌入** 小型装饰性缺省,必须与没有消费者接线相通。 图片 在组件中作为数据 URI 内置 **财务报告和审定财务报表** 作为文件在 `@cloudgrid-io/ui/brand/`,有一个测试 保持两个字节平等. `EmptyCreations` 实值 例如: 4个缩略图, 大约13KB文件, 大约18KB 曾经内含 `empty-creations-previews.ts`。它正确地使其进口的时刻. - **决定** 大型套装,或任何套装,消费者需要选择。 图片是 文档,消费者将每个组件的 URL 交接(`resolveSrc`,或一个 `src` (每个项目)通过自己的捆绑机或公共文件夹. `ShowcaseScroll` 实例是: 19张照片,大约205KB文件. 内在的,他们会增加超过四分之一兆字节 每一个导入包桶的捆绑, 无论该页是否显示它们. 粗线:嵌入于几幅相片 **总计约20KB以下**,以及 组件没有它们就无用。 算了 下定决心吧 Base64 将文件长出大约一个 第三,一幅内在图片由枪管的每个消费者支付,而不只是由 它的页面. ## 电子邮件布局 ```ts import { renderEmail } from "@cloudgrid-io/ui/email" const { html, text } = renderEmail({ headline: "expiring-soon", title: "Pricing Grid expires in 5 days.", points: ["Not opened in 25 days", "Expires Friday, October 16"], action: { label: "Keep it", url: "https://my.cloudgrid.io/entities/ent_7a10?action=keep" }, note: "Kept pages don't expire.", footer: { lines: ["You get this because you own Pricing Grid."] }, assetBaseUrl: "https://assets.example.com/email/", // where YOU serve brand/email/* }) ``` 无依相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 Gmail、 Outlook 和 Apple Mail 的表格和内置样式 包含每个链接的纯文本部分. **库名无主机 .** 图片和字体只从发送者的 URL 中加载 : - `assetBaseUrl`:服务此软件包 `dist/brand/email/*` (字签 有六个头条图像, 网格平板),从您自己的域名,并通过该基. 没有它,电子邮件是无图像的 对于每个客户端: 单词标记和头条是活文字, 这也正是 Outlook 用于 视窗总是得到. - `webFontsUrl`: Space Grotesk 和 Manrope 的样式表, 在您选择的主机上 (单位:千美元)`GOOGLE_FONTS_EMAIL_CSS` 如果你接受谷歌的话). 没有它,系统堆栈会制造. - `items[].imageUrl`: 您自己的图片 URL, 按给定使用 . 每个框架的预览, 如 Apple Mail、 Gmail 和 Outlook : `/gallery/email` 在登记册中. ## 版本 塞姆维尔。 切入值变化不大;清除量很大. ## 许可证 见藏所. ## 常见问题 ### @cloudgrid-io/ui 是什么？ CloudGrid设计系统:反应组件,品牌设计标志,Tailwind主题 自管字体\. ### 如何安装 @cloudgrid-io/ui？ 在项目目录运行 npm install @cloudgrid-io/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react-is（^19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cloudgrid-io/ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cloudgrid-io/ui 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @cloudgrid-io/ui 可以商用吗？ @cloudgrid-io/ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @cloudgrid-io/ui 的下载量有多少？ 根据 npm 官方下载统计，@cloudgrid-io/ui 在 2026/10/10 – 2026/11/08 这 30 天内被下载 15,789 次，日均约 526 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cloudgrid-io/ui 还在维护吗？ 最新版本 0\.51\.1 发布于 2026/11/10（今天）；至今共发布 70 个版本，其中过去 12 个月发布了 70 个；首次发布于 2026/08/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。