# @fohte/ui 中文文档

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

版本：0\.1\.8
npm 元数据更新时间：2026-11-07T15:36:22.799Z
中文译文更新时间：2026-11-15T04:09:10.217Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fohte/ui
原文对照：https://npmcn.com/package/%40fohte/ui/?lang=original
源码仓库：https://github.com/fohte/ui

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

- 包体积（解压后）：71.2 kB，26 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：3 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，lucide-react \>=0\.577\.0，@base-ui/react ^1\.3\.0
- 首次发布：2026-09-24T13:13:21.841Z
- 最新版本发布：2026-11-07T15:36:22.468Z
- 近 30 天下载量：2649（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

用于fohte应用的共享设计符和React组件.

## 安装

```sh
npm install @fohte/ui
```

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

## README

# @fohte/ui (英语)

用于fohte应用的共享设计符和React组件.

## 安装

```sh
pnpm add @fohte/ui
```

## 使用量

```css
@import 'tailwindcss';
@import '@fohte/ui/tokens.css';
```

该软件包在下列地点提供光标: `:root` 和暗号 `.dark`,加上字体堆栈、半径值和 a `2xs` 文本大小。 颜色作为 Tailwind 公用设施, 例如 `bg-background` 财务报告和审定财务报表 `text-foreground`。 。 。 .

软件包没有遵循 `prefers-color-scheme`; 消耗性应用程序控制, 当 `.dark` 将适用。 处理时需要尾风 CSS v4 `@theme` 指令。 。 。 字体堆放参考 JetBrains Mono Variable 和 IBM Plex Mono, 此软件包没有捆绑; 需要时在应用程序中加载字体文件 .

## 反应组件

从它们的子路径导入组件 :

```tsx
import { BottomNavigation } from '@fohte/ui/bottom-navigation'
import { Button } from '@fohte/ui/button'
import { ButtonGroup } from '@fohte/ui/button-group'
import { Checkbox } from '@fohte/ui/checkbox'
import { Chip } from '@fohte/ui/chip'
import { CommandPalette } from '@fohte/ui/command-palette'
import { Dialog, DialogContent, DialogTitle } from '@fohte/ui/dialog'
import { FieldTrigger } from '@fohte/ui/field-trigger'
import { Input } from '@fohte/ui/input'
import { Kbd } from '@fohte/ui/kbd'
import { List, ListItem } from '@fohte/ui/list'
import { Panel } from '@fohte/ui/panel'
import { Popover, PopoverContent, PopoverTrigger } from '@fohte/ui/popover'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@fohte/ui/select'
import { SegmentedControl } from '@fohte/ui/segmented-control'
import { Tabs, TabsList, TabsPanel, TabsTab } from '@fohte/ui/tabs'
import { Textarea } from '@fohte/ui/textarea'
import { Tooltip, TooltipContent, TooltipTrigger } from '@fohte/ui/tooltip'
```

`BottomNavigation` 接受水平行中的链接和动作按钮。 每个项目都有 `id` 可见 `label`,也可以包括 `icon`, (中文(简体) ), `selected` 状态,以及 `className`。链接项目使用 `renderLink` 用耗用应用程序的路由器组件来包裹内容。 渲染槽接收链接内容,样式类,以及当前页面状态. 替换 `openComposer` 中的示例.

```tsx
import {
  BottomNavigation,
  type BottomNavigationItem,
} from '@fohte/ui/bottom-navigation'

const items = [
  {
    id: 'overview',
    type: 'link' as const,
    label: 'Overview',
    selected: true,
    renderLink: ({ children, ...props }) => (
      <a href="/overview" {...props}>
        {children}
      </a>
    ),
  },
  {
    id: 'compose',
    type: 'button' as const,
    label: 'Compose',
    onClick: openComposer,
  },
] satisfies ReadonlyArray<BottomNavigationItem>

<BottomNavigation aria-label="Primary navigation" items={items} />
```

组件提供语义符号颜色,单行标签,当项目不合适时提供水平滚动. 过 `className` 以样式或定位应用程序布局的导航,并设置项目 `className` 来定制它的外观. `fixed` 或者说 `sticky` 律师事务所的安置和空间仍然是申请人的责任.

反应,反应DOM, `@base-ui/react`,以及 `lucide-react` 是同伴的依赖关系。 确保在消耗性申请中提供。 其支持的版本范围在 `package.json`。 。 。 .

组件子路径发布 TSX 源,所以消耗的捆绑器必须从依赖性中转换 TSX.

这些组件还需要Tailwind CSS v4, `tw-animate-css`,以及 `shadcn` 在消耗性应用。 如果它们已经存在, 将它们安装为发展依赖:

```sh
pnpm add -D tailwindcss@^4 tw-animate-css@^1 shadcn@^4
```

例如,一个选择可以从其触发器、值、内容和项目组成:

```tsx
<Select defaultValue="first">
  <SelectTrigger aria-label="Choose an option">
    <SelectValue placeholder="Choose an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="first">First option</SelectItem>
    <SelectItem value="second">Second option</SelectItem>
  </SelectContent>
</Select>
```

耗用应用程序的 CSS 必须装入 Tailwind CSS v4, `tw-animate-css`, (中文(简体) ), `shadcn/tailwind.css`,这个包裹的标志。 Tailwind v4 默认忽略依赖文件, 因此明确使用软件包源注册 [`@source`](https://tailwindcss.com/docs/detecting-classes-in-source-files)。调整相对于样式表的路径 :

```css
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@import '@fohte/ui/tokens.css';

@source '../node_modules/@fohte/ui/src';
```

## 许可证

麻省理工学院

## 常见问题

### @fohte/ui 是什么？

用于fohte应用的共享设计符和React组件\.

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

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

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

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fohte\_\_ui 是否存在。

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

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

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

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

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

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