# @flinbu/seed 中文文档

规范地址：https://npmcn.com/package/%40flinbu/seed/

版本：0\.6\.0
npm 元数据更新时间：2026-11-06T00:11:42.309Z
中文译文更新时间：2026-11-15T04:45:02.937Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40flinbu/seed
原文对照：https://npmcn.com/package/%40flinbu/seed/?lang=original
项目主页：https://seed-lyart.vercel.app/
源码仓库：https://github.com/flinbu/seed

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

- 包体积（解压后）：1.5 MB，393 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0，react-dom ^18\.2\.0 \|\| ^19\.0\.0，lucide-react \>=0\.400\.0
- 首次发布：2026-10-17T03:29:41.820Z
- 最新版本发布：2026-11-06T00:11:42.007Z
- 近 30 天下载量：2148（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

种子回放组件:可访问 (Radix),以 Tailwind CSS v4 和种子信使为样式,可主题与创建Theme相接.

## 安装

```sh
npm install @flinbu/seed
```

也可以使用：`pnpm add @flinbu/seed`、`yarn add @flinbu/seed`、`bun add @flinbu/seed`

## README

# @flinbu/种子 (英语)

种子是React和Tailwind CSS v4的平和中性第一设计系统. 它的表面是真正的灰色,它有一个口音,你可以自己制作,其对比度通过"光和暗"中的WCAG AA. 互动部分基于 [半径](https://www.radix-ui.com/primitives),所以键盘,焦点和屏幕读取器都是为你处理的.

**Docs和现场主题构建者:** [种子-lyart.vercel.app](https://seed-lyart.vercel.app/)

```bash
npm i @flinbu/seed @flinbu/seed-tokens lucide-react
```

`lucide-react` 是可选的:种子取出任何图标,示例使用Lucide.

## 设置

### 带有尾风 CSS v4

```css
/* app.css */
@import "tailwindcss";
@import "@flinbu/seed/styles.css";
```

这条线带来了种子的标志,字体和类型样式,并告诉Tailwind扫描种子的组件,以用于他们的课. 现在每个符号都是您可以在自己的代码中使用的工具: `bg-primary`, (中文(简体) ), `text-secondary`, (中文(简体) ), `border-primary`, (中文(简体) ), `p-base`, (中文(简体) ), `gap-xs`, (中文(简体) ), `rounded-control`, (中文(简体) ), `shadow-elevation-md`, (中文(简体) ), `label-label-2-medium`。 。 。 .

### 没有尾风

```ts
import "@flinbu/seed/compiled.css";
```

## 用这个

```tsx
import { Button, Field, Input, ThemeProvider, ThemeScript } from "@flinbu/seed";
import { Plus } from "lucide-react";

export function Invite() {
  return (
    <form className="flex flex-col gap-base">
      <Field label="Email" hint="They get a link that works for 7 days.">
        <Input type="email" placeholder="name@company.com" />
      </Field>
      <Button leftIcon={<Plus />}>Send invite</Button>
    </form>
  );
}
```

图标作为元素传递( E) :`leftIcon={<Plus />}`)),因此它们也从React Server组件工作.

### 光、暗和系统

```tsx
// app/layout.tsx (Next.js App Router)
import { ThemeProvider, ThemeScript } from "@flinbu/seed";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head><ThemeScript /></head>
      <body><ThemeProvider>{children}</ThemeProvider></body>
    </html>
  );
}
```

`ThemeScript` 设置页面画前的主题,所以它不会闪出. `useTheme()` 读取并更改.

## 把它给你

主题构建者运行一个命令. 它会把你的品牌颜色变成光和暗的全尺寸, 检查每个口音与WCAG AA

```bash
npx seed theme --brand "#0d9488" --name acme --radius round --out src/acme.css
```

```css
@import "tailwindcss";
@import "@flinbu/seed/styles.css";
@import "./acme.css";
```

准备 `data-brand="acme"` 打开 `<html>`,或者在任何元素上仅以该页面的这一部分为主题。 您还可以尝试主题直播 [主题页面](https://seed-lyart.vercel.app/docs/theming)。 。 。 .

## 构成部分

-   **行动:** 按钮 按钮组 切换 切换组 工具栏.
-   **表单 :** 输入,文本区,字段,标签,复选框,无线电组,切换,选择,组合框,滑动器,OtpInput,日历,日期选择器,日期RangPicker,FileUpload,CopyField + CopyButton,输入组,TagInput,密码输入,引用输入,TimePicker,RichTextEditor.
-   **重叠 :** Dialog, AwardDialog, Sheet, Drawer, Popover, HoverCard, ControlPalette (QQK), ControlMenu, DropdownMenu (带有复选框,收音机和子菜单), Tooltip.
-   **导航 :** Tabs (行和丸,有计数), Breadcrumb, Pagination, Stepper, Sidebar (collaps to 图标), Menubar, Navigation Menu, TableOf Contents, Link.
-   **显示 :** 徽章, Avatar (有存在), Avatar Group, Icon, Kbd, Card, 分隔符, 表( 有不同标题, 有选择的行), Accordion, FileTree, Tag, 描述列表, 时间线, 注释Thread, Typography + heading + Text.
-   **反馈 :** 警告, Banner, 土司 + Toaster, Meter, 进步Ring, 进步, Skeleton, Spinner, 空状态, Tour.
-   **AI聊天:** 信件 + 信件组, 泡泡 + 泡泡组, 信件滚动器, 附件 + 附件组, 代码Brock, 标记器, 跟踪, 问卷 .
-   **设计系统工具:** ColorSwatch, ColorScale, TokenPreview, TypeSpecimen, ContrastPair, ColorPicker, TokenInput, 数字输入, Stage, PropersTable, 外加颜色数学(parseColor, 对比Ratio, 格式Ratio, 格式Oklch).
-   **数据 :** 数据表,图表(栏,叠行,行,区域),StatTile,Carousel.
-   **布局 :** Stack, Inline, Grid, Container,可视化隐藏,页眉,可折叠,可折叠,可折叠区域,项目+项目组,SpectRatio,可折合,方向提供.
-   **主题:** 主题Provider,主题脚本,使用Theme.

种子设计系统中的每个组件现在都在包中.

## 相关

-   [`@flinbu/seed-tokens`](https://www.npmjs.com/package/@flinbu/seed-tokens):作为 CSS 变量的自带符号,一个 Tailwind 主题和 DTCG JSON, 加上 `createTheme()` 编辑 `seed` CLI(英语:CLI).
-   [GitHub 图像](https://github.com/flinbu/seed)

种子是UI的 [芬丽](https://fenly.io/)向所有人开放。 麻省理工学院费利佩·利纳雷斯.

## 常见问题

### @flinbu/seed 是什么？

种子回放组件:可访问 \(Radix\),以 Tailwind CSS v4 和种子信使为样式,可主题与创建Theme相接\.

### 如何安装 @flinbu/seed？

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

### @flinbu/seed 支持 TypeScript 吗？

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

### @flinbu/seed 支持 ESM 还是 CommonJS？

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

### @flinbu/seed 可以商用吗？

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

### @flinbu/seed 的下载量有多少？

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

### @flinbu/seed 还在维护吗？

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