@flinbu/种子 (英语)
种子是React和Tailwind CSS v4的平和中性第一设计系统. 它的表面是真正的灰色,它有一个口音,你可以自己制作,其对比度通过"光和暗"中的WCAG AA. 互动部分基于 半径,所以键盘,焦点和屏幕读取器都是为你处理的.
Docs和现场主题构建者: 种子-lyart.vercel.app
npm i @flinbu/seed @flinbu/seed-tokens lucide-react
lucide-react 是可选的:种子取出任何图标,示例使用Lucide.
设置
带有尾风 CSS v4
/* 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。 。 。 .
没有尾风
import "@flinbu/seed/compiled.css";
用这个
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="[email protected]" />
</Field>
<Button leftIcon={<Plus />}>Send invite</Button>
</form>
);
}
图标作为元素传递( E) :leftIcon={<Plus />})),因此它们也从React Server组件工作.
光、暗和系统
// 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
npx seed theme --brand "#0d9488" --name acme --radius round --out src/acme.css
@import "tailwindcss";
@import "@flinbu/seed/styles.css";
@import "./acme.css";
准备 data-brand="acme" 打开 <html>,或者在任何元素上仅以该页面的这一部分为主题。 您还可以尝试主题直播 主题页面。 。 。 .
构成部分
- 行动: 按钮 按钮组 切换 切换组 工具栏.
- 表单 : 输入,文本区,字段,标签,复选框,无线电组,切换,选择,组合框,滑动器,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:作为 CSS 变量的自带符号,一个 Tailwind 主题和 DTCG JSON, 加上createTheme()编辑seedCLI(英语:CLI).- GitHub 图像
种子是UI的 芬丽向所有人开放。 麻省理工学院费利佩·利纳雷斯.