# @bubbasfw/ui 中文文档

规范地址：https://npmcn.com/package/%40bubbasfw/ui/

版本：0\.9\.0
npm 元数据更新时间：2026-10-26T11:54:11.381Z
中文译文更新时间：2026-11-08T21:10:30.853Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bubbasfw/ui
原文对照：https://npmcn.com/package/%40bubbasfw/ui/?lang=original
项目主页：https://handh-dev.github.io/bubbas-ui/
源码仓库：https://github.com/handh-dev/bubbas-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：3 MB，113 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react ^19\.2\.3，nativewind ^4\.2\.7，tailwindcss ^3\.4\.17 \|\| ^4\.0\.0，react-native ^0\.86\.3，react-native-web ^0\.21\.4，react-native-css-interop ^0\.2\.7
- 首次发布：2026-10-21T19:51:39.019Z
- 最新版本发布：2026-10-26T11:54:09.648Z
- 近 30 天下载量：2057（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

布巴共享网络设计系统. 历史根源/本土兼容性出口仍然可用,没有新的本土支持承诺.

## 安装

```sh
npm install @bubbasfw/ui
```

也可以使用：`pnpm add @bubbasfw/ui`、`yarn add @bubbasfw/ui`、`bun add @bubbasfw/ui`

## README

# 校对:soup

## 新网络合同——未公布0.9.0候选人

通过新版本支持网络使用 `@bubbasfw/ui/web` 财务报告和审定财务报表 `@bubbasfw/ui/web.css`. 现有 " 反应土著网络 " / " 土著网络 " 的实施, 根相容性出口和不可改变的地基得到保留. 现有移动消费者保留其公布的针头;该合同没有 新的博览会,iOS或Android资格. 土著实例和历史 核查者仍可明确获得.

审查实际受影响的网站localhost预览中的共享设计变化. 工作室仍然是获得批准的身份、艺术品权利和基金会的来源; a 工作室目录更新或部署不是网站发布要求. 应用程序保留内容,导航,动作,认证和核心访问. 只有所有者批准经过审查的准确设计和发布.

包一次,然后限定原始归档:

```sh
pnpm run pack --destination artifacts/candidates/0.9.0
pnpm verify:package --archive /absolute/original.tgz --source-receipt /absolute/source.json
pnpm verify:package --archive /absolute/original.tgz --check-report /absolute/report.json
```

第一个指令构建并创建了一个正本加其源收. 这个 第二,不重建/重新包装就消耗这些字节;它检查文物 实际拘留 `/web` 表格/部分和独立的下一份 消费者。 再使用需要相同的源内容(包括支持的) 未跟踪输入,原始存档,所需模式和锁/工具输入. 报告 开始不完整,只有在需要的结果和自主清理之后才能通过. 原始生产来源/工具的保管仍不同于核查者 源/工具快照; 校正器可以测试所保留的正本 不改变它的字节。 网站故意卖出同样的原版 并缠住永恒 在建立/论证/审查之前,附上资格报告.

`pnpm verify` 财务报告和审定财务报表 `pnpm typecheck` 选择共享/网络检查。 运行 `pnpm verify:legacy:native` 或者说 `pnpm verify:legacy:full` 仅针对明确范围 历史相容性工作。 输入保存的根声明/ JavaScript 不是一项新的本地接受要求。 下一个实例使用实际 `/web` 条目和预建样式表; 其已有的依赖性集在 这个初始的工具转换,包括 React 原住民声明类型.

这个来源候选人在真正的档案和 网站检查完成。 已公布的0.84/0.8.5正本仍然不可改变.

## 历史通用设置和发布注释

布巴通用的土著反应、博览会和土著反应网络组件库. 所有组件都使用原生原始和原生Wind. 反应和平台运行时间 是同位素,没有 Base UI, Radix UI 或 DOM 组件执行 .

0.6.1版本包括32个控制器、共享的图标库、15个可重复使用的区段、范围为光/暗/系统 主题和共享设计符号。 博览会和现有的Next.js通用示例 使用根条目;Vite和Astro使用下面描述的浏览器条目.

三种任务模式涵盖外观设置、页面介绍和清晰 装入/空出/误入/下行/已备状态:外观控制、页眉和 Async State(英语:Async State)). 它们的可重复实例保留源/新鲜度/缺失/零 区分。 东道主拥有持久性和产品数据.

[浏览视觉工作台和设置指南](https://handh-dev.github.io/bubbas-ui/)

```tsx
import { Button, ThemeProvider } from '@bubbasfw/ui/web';

<ThemeProvider appearance="system">
  <Button onPress={save} loading={saving} loadingLabel="Saving…">
    Save changes
  </Button>
</ThemeProvider>
```

## 标准shadcn/ui组件(0.8.5候选人)

使用正常的阴影 CLI 及其在您的应用程序中安装的组件源 . 布巴提供语义主题变量,而不是替换组件 API. 在 Tailwind 4 app中,在 Tailwind 后导入主题 。 替换生成的 CLI 中性 `:root`编号 :`.dark` 带有此适配器的可变块; 保留后置中性 块将覆盖 Buba 主题。 保留其他应用程序 CSS 和动画导入 :

```css
@import "tailwindcss";
@import "@bubbasfw/ui/shadcn.css";
```

```sh
pnpm add @bubbasfw/ui@0.8.5
pnpm dlx shadcn@latest add button card input dialog
```

```tsx
import { Button } from "@/components/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

<Card>
  <CardHeader><CardTitle>Campaign overview</CardTitle></CardHeader>
  <CardContent><Button onClick={save}>Save draft</Button></CardContent>
</Card>
```

使用您的项目的实际导入名和已有的 `components.json` 配置 . 保持由CLI产生的组件及其在消费者中的正常依赖性. 不导入 `web.css` 或添加只用于阴影组件的反相原生/内生Wind. CSS唯一的路径没有 JavaScript 运行时间; 本地对等器在安装时是可选的 . 现有的普遍/根本和 `/web` 组件仍然需要其记录平台 等同; 土著Wind 4 继续使用 Tailwind 3. 阴影适配器支持 尾风 4 和 现代全彩 CSS 变量( 非遗留) `hsl(var(--primary))` 尾风3配置. `shadcn-theme.css` 仅导出变量 保持自己 Tailwind 映射的宿主.

使用常规 `.dark` 根类或 `data-bubba-theme="light|dark"` 编辑 树根。 主机仍然拥有系统分辨率和持久性;没有第二位 外观提供者。 将选中的外观放在文档根上这样 门户化对话框,菜单和工具提示继承. 蒙特塞拉特仍然是东道国; 没有捆绑字体或艺术品。 四像素控件和十二像素面板来自 从被钉住的地基。 主动作使用原红色;焦点使用 海军在光明而白色在黑暗. 标准链接按钮使用 Canonical 链接 墨; 破坏性提醒和菜单项使用可读错误墨. 这些范围 语义映射留下了坚固的破坏性按钮红色并带有白色标签和 上游组件源不变。 图表颜色表示系列,而不是商业事实.

`0.8.5` 成为未公布的候选人,直到明确拥有者出版批准. 真正的社交仪表板是安装/互动证明;它拥有自己的 工作流程,路由,认证,记录和提供者操作.

## 目录

-   基础:文本、标题、堆栈、内线、集装箱、卡片、分块.
-   动作:按钮、图标按钮、链接.
-   内容:徽章,神通,列表项目,空州.
-   表格:输入、文本区、窗体、复选框、切换、无线电组、选择.
-   导航:取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取出取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取.
-   披露:Agnion, Dialog, Sheet. 互联网档案馆的存檔,存档日期2013-12-21.
-   反馈:警报,土司,斯宾纳,进步,斯凯勒通.

原生道具和裁判在有支持的地方传送。 交互式组件 揭发无障碍名称和状态. 一个消费的应用仍然拥有内容,路线, 其装置和辅助技术上的字体装载和接受.

`Button` 变体为主、二级、轮廓和幽灵;大小为sm、md和 lg. 已禁用并加载块按压. `ThemeProvider` 范围语义颜色 用于光,暗或系统外观,并支持嵌入式预览. 纯土著 应用程序可能会省略可选的 React Independent Web 端点 .

## 消费者设置

Vite和Astro使用下面的浏览器-主机设置. 本节介绍 用于 Expo 和 Next.js 实例的通用根条目.

基线:19.2.3反应,0.86.3反应土著网络0.21.4反应, 原生Wind 4.2.7,尾风3.4.17. 与应用程序相兼容的端点一起安装 :

```sh
pnpm add @bubbasfw/ui@0.6.1 nativewind@4.2.7
pnpm add -D tailwindcss@3.4.17
```

主机会编译软件包的实用类 。 包含已公布的来源 :

```js
const path = require('node:path');
const uiRoot = path.dirname(require.resolve('@bubbasfw/ui/package.json'));
module.exports = {
  darkMode: 'class',
  content: [
    './App.{js,jsx,ts,tsx}',
    './{app,pages,src}/**/*.{js,jsx,ts,tsx}',
    path.join(uiRoot, 'src/**/*.{ts,tsx}'),
  ],
  presets: [require('nativewind/preset'), require('@bubbasfw/ui/tailwind-preset')],
};
```

在应用条目中导入带有 Tailwind 基础、组件和 公用事业。 博览会需要本地 Wind 的 Metro/ Babel 设置和兼容本地 依赖性。 声明 `react-native-css-interop@0.2.7` 直接因为本地窗口 4 的 Babel 在 pnpm 的孤立布局下预设此导入到应用程序文件 :

```sh
pnpm add react-native-css-interop@0.2.7
pnpm add -D @babel/plugin-transform-react-jsx@7.29.7
npx expo install react-native-reanimated react-native-worklets react-native-safe-area-context
```

Next.js 需要精确的 React Introduct – React Introduct Web别名,网页扩展名 互联网档案馆的存檔,存档日期2013-12-02., professional., International Wind的JSX导入源和Tailwind 3/PostCSS. 可运行 Pages 路由器实例使用 Web 软件包和 Tailwind `important: true`互动 App路由器消费者需要客户端边界. 涡轮包没有配置 .

见 [完整的可运行示例](https://github.com/handh-dev/bubbas-ui/tree/main/examples) 编辑 [视觉工作台](https://handh-dev.github.io/bubbas-ui/) 用于组件预览和平台设置. 两个示例应用都包括了从真包条目中得出的每个目录组件.

### 已装入主机字体

React Industrial 视图不会继承字体家族. 在应用程序中装入字体 将注册名称传给 `ThemeProvider`。每个共享文本和输入, 包括表格标签、反馈和模式内容,解决范围默认问题.

在SDK 57世博会上,使用静态面和 `expo-font` 配置插件 。 这个 [犬类博览会实例](https://github.com/handh-dev/bubbas-ui/tree/main/examples/expo) 蒙特塞拉特登记号:400/500/600/700/900 机器人的 `BubbasBody` XML 家族; iOS 读取嵌入式 `Montserrat` 家族和PostScript脸谱名. 重建 更改注册后本地应用程序 。 然后通过平台注册 家庭对共享提供者:

```tsx
// registeredBodyFamily checks expo-font.getLoadedFonts; see the complete example.
const family = registeredBodyFamily();
return <ThemeProvider fontFamily={family}>
  <PageHeader title="Find your Bubba’s" />
  <FormField label="Search stands"><Input placeholder="Name, city or ZIP" /></FormField>
</ThemeProvider>;
```

在同一Android家族别名下不要运行时间加载单个文件: 替换多重 XML 家族。 SDK 57 不支持可变字体或 多文件家庭 `useFonts` 注册;见 [博览会的字体指导](https://docs.expo.dev/develop/user-interface/fonts/)。 。 。 . 该示例单独命名为正则预览倒计时帮助了 Expo Go 或更长时间 hosts, 且不合格 真正的体重家族 。 缺少字体保留平台 倒计时。 静态衍生物保留了源头散列,被固定的生成器配方 和 OFL 许可证; npm 中没有字体二进制 .

Web主机可以通过他们装入的 CSS 家族或保留文件继承. 嵌入式提供者继承了字体. 当地人 `style.fontFamily` 覆盖 默认; `Text variant="code"` 保留单一空间。 省略一个 `fontFamily` 保存已存在的默认值。 原始的App所有本地文本/导航仍为 东道方的责任; `useTheme().fontFamily` 曝光当前名称 .

## 出口和权利

无害环境管理、CJS和申报一起进行。 尾风扫描的源头船. `@bubbasfw/ui/tokens` 独立于反应; `@bubbasfw/ui/tailwind-preset` 实值 常见JS. 通用条目保留外部平台运行时间; 浏览器 条目包括它的NufWind网络互通。 没有字体或艺术品二进制船.

基础系统0.5.0和品牌发布1.0.0保持单独版本. 不可改变的工作室发布, 文档批准/权利, 散装和锁船 `foundations/`。便携式出口品是: `/foundations`, (中文(简体) ), `/foundation-manifest`, (中文(简体) ), `/foundation-lock`,以及 `/foundations.css`。服务器安全信号导出会曝光 foundationDigest/sourceCommit; package.json#bubba 曝光相匹配的消费针. 完整的打字、排版、运动、无障碍、, 组成和组建合同.

软件是 [麻省理工学院](https://npmcn.com/package/%40bubbasfw/ui/LICENSE)布巴的名字和标志保留单独的权利;否 获得商标许可证。 出版物仍然是由所有人审查的明确出版物 步骤,没有按下或合并时自动 npm 释放.

### Vite / Astro / 服务器委托的网络主机

```sh
pnpm add @bubbasfw/ui@0.6.1 react@19.2.3 react-dom@19.2.3 react-native-web@0.21.4
```

对于无法解析 React Industrial 本地条目的浏览器主机,导入 在世界任何地区人权和基本自由遭受侵犯的问题 `@bubbasfw/ui/web` 导入 `@bubbasfw/ui/web.css` 一次 一次吗 供应反应、 DOM 反应和原始网络反应作为主机 同行. 以 `ThemeProvider appearance="light"` (或暗发. ) 页:1 本条目保留 SSR 文本、语义标题和真实导航 锚. 它包括了IndiaWind的麻省理工学院网络互通帮助器;React/RNW保持外部. 保持软件包宣布的同位素相容. 导入软件包子路径, 这样浏览器 捆绑者和节点选择合适的运行时间条件. 本条目要求 没有主机本地 Wind Babel 或 Tailwind 配置 .

```tsx
import { ThemeProvider, HeroSection } from '@bubbasfw/ui/web';
import '@bubbasfw/ui/web.css';

<ThemeProvider appearance="light">
  <HeroSection variant="marketing" title="Your page title" />
</ThemeProvider>
```

可重复使用的段落有:站点头(Siteheader),站点Footer,英雄部分,内容部分, 产品卡/Grid、 Category Card/Grid、 地点卡/Grid、 产品详细和 晋级班纳. 所有内容,资产和行动都来自主办方. 核心遗迹 负责改变事实. `reviewCatalog` 财务报告和审定财务报表 `UIReviewCatalog` 曝光 单独审查候选人的实际组成部分和章节实例。 候选人 评论和批准仍留在工作室, 键入确切的释放文物.

对于Node/Astro SSR,首先提供共享内容并包括主机RNW `StyleSheet.getSheet()` id/text 在文档中与web.cs并列. 这个 水合前提供结构式RNW CSS。 使用相同的反应/ RNW 实例 整个 本地形式提交/重设意图通过 `/web`按钮 `type`; 通用根入子仍然是应用活性原始. 将共享的 Site Header 和其他具有相同数据的互动部分水化 以启用菜单和画廊。 主机保留自己的路由,认证, 数据与行动.

## 已核准附加说明的网页发布0.6.1

车主批准了精确的 0.6.1 兼容补丁 保存审查 注释网页设计. 它修正已丢弃的网络按钮调用器样式; 0. 6. 0 残存 堕地而无常. 已出版的档案保留了其历史候选 README 措辞; 这些当前寄存器指南不会重新包装归档 . 见 [释放记录](https://github.com/handh-dev/bubbas-ui/blob/main/docs/releases/0.6.1.md)基础系统0.5.0及其不可改变 来源/开发源保持不变。 营销变体现在使用最初的蓝色, 紧凑的红色/蓝色动作,有徘徊的发光,以桌面导航为中心,全高 白色英雄,等效紧凑的产品卡,以及有呼号的金徽. `CampaignSection`, (中文(简体) ), `SocialSection` 财务报告和审定财务报表 `FlagTicker` (一) 获取呼叫者拥有的内容; `PromotionBanner emphasis="sparkler"` 突出给出的报价。 没有事实 推断。 在减速运动下停止运动 滴答运动有暂停控制.

`Icon` 使用被钉住的 Lucide 1.61.0 控制图标和简单图标 16.35.0 社会 标记,通过带有96px透明源的RN图像提供. 使用 24px 控制 和22px社会标记 目标至少44px宽/高。 提供无障碍 父控件上的标签,或 `accessibilityLabel` 对于一个独立的图像. 矢量来源、许可证和SHA256散热船 `icons/`; 可复制的 捆绑的铬配方是 `scripts/build-icons.mjs`社会商标仍保留在 他们的主人。 此子集没有引入本地 SVG 对等点或字体依赖 .

营销行动利用现有 `appearance="marketing"` 财务报告和审定财务报表 `size` API (英语). 选择 `size="lg"` 用于功能化动作(60px桌面/48px手机,18px桌面/16px手机标签, 12px 角; 默认 `md` 财务报告和审定财务报表 `sm` 保留紧凑的48px目标,14px标签和 6px角 (英语). 英雄节选择共享的紧凑同行处理;头和重复控制 保持紧凑。 蓝色/红色填充物使用温和的梯度和网络上柔软的环境发光, 带有升降/压力反馈和白色分离的焦点环. 不活动控制有 没有发光或移动; 减少运动可以消除出行。 土著保持同样的尺寸, 扎实的品牌填充,标签,语义 和约束的本土阴影 没有新的 梯度依赖。 默认应用程序控制保留其先前的设计.

## 移动营销改进候选 0.7

未公布;公众0.6.1 仍获批准。 英雄动作使用紧凑的单行 48px目标。 金属荣誉徽章,只有金色的连续闪闪闪发光,安全满满地 产品标题 二 三 四列网格 更窄的星盖和微妙的移动 导航悬浮反馈属于共享系统. 集装箱/附属部分 接受 `width="wide"`; 内容部分接受 `surface="transparent"`; 在一个 外部主题 提供当独立区域 不应该画画布.

`SiteHeader` 接受纯通知字符串或安全 `{text,tone}` 部分, 语气所在 `default` 或者说 `yellow`; 可选 `announcementCompact` 用品a 看过短电话留言 文字是静态的 装配的 从来不是马克 黄金 单词使用海军支援来进行可读对比。 一样 `AnnouncementBanner` 实值 用于控制 `AnnouncementEditor`: 值/值变化,文本选择 并制作黄色/制作白色、已禁用/繁忙/错误、实际电话预览和小文本 警告 警告他们 主机拥有核心呼叫,启用状态,修改并保存动作. 无 HTML 被接受;不需要工作室运行时间.

作者限制为160个Unicode字符和24个正版文本部分. 长的电话复制件仍然很小;提供简洁的电话复制件并检查其 实际预览。 土著/土著网络和网络/土著风格前置合同 留下来。 将预建的网页条目和 CSS 用于遗留主机的范围化文档; 不重复控件或将全局遗留样式显示在预览中.

打开/关闭的开关控制了移动的滴答器,金色倒影/扭矩, 侧冲和动作出行 总是有选择和动作减慢. 没有复制艺术/字体二进制或引用运行时间 。 获得许可的社会图标支持 Instagram, Facebook, X, YouTube, TikTok and Spotify; URLs stay caller提供. 见 [候选人合同](https://github.com/handh-dev/bubbas-ui/blob/main/docs/releases/0.7.0-candidate.md) 对于权利,有意义的浏览器检查和单独的所有者出版/采用闸门.

### 选定的竞选活动预设(当地候选人)

```tsx
import { FocusMarquee, FOCUS_MARQUEE_CAMPAIGN_PRESET } from '@bubbasfw/ui';
<FocusMarquee {...FOCUS_MARQUEE_CAMPAIGN_PRESET} items={callerOwnedFacts} />
```

单是预设的每药1.64分 单是1.1分 25分, 25s进入,04s安顿. Apps 提供事实; 不强制预览宽度 . 一般部分的省略刻度还剩2.3s. 这个本地候选人 不授权出版或部署.

Sparkler 提议: 使用 `PromotionBanner variant="marketing" emphasis="sparkler"` 与 `title`选项 `titleAccent` (黄金第二行), `eyebrow`,描述, 行动 可选打电话者拥有 `artwork={{uri, alt:'', aspectRatio, rotation}}` 保留原有比例/颜色和共同反应方向。 保留 本套件以外的私人艺术;其权益和通知仍属于其所有者. 无资产国家保留该提议和行动。 见系统合同和 同构件目录 `promotionExample` 用于本地审查的固定设备.

火花出价使用共享产品徽章的大小:16px/36px 电话和18px/40px在更宽的容器中。 现有产品徽章保留 压缩默认值 。 金属发光、闪光和金色闪光仍然共享.

## 常见问题

### @bubbasfw/ui 是什么？

布巴共享网络设计系统\. 历史根源/本土兼容性出口仍然可用,没有新的本土支持承诺\.

### 如何安装 @bubbasfw/ui？

在项目目录运行 npm install @bubbasfw/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bubbasfw/ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bubbasfw/ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @bubbasfw/ui 可以商用吗？

@bubbasfw/ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bubbasfw/ui 的下载量有多少？

根据 npm 官方下载统计，@bubbasfw/ui 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,057 次，日均约 69 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bubbasfw/ui 还在维护吗？

最新版本 0\.9\.0 发布于 2026/10/26（13 天前）；至今共发布 13 个版本，其中过去 12 个月发布了 13 个；首次发布于 2026/10/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。