简洁
精细反应设计系统, 测量到像素的像素 阿提欧。 。 。 . 每一个组件的相距,半径,阴影, 和运动被读取 从活的应用程序 复制了逐字记录——然后用分镜检查来保护它,使其不能漂移.
- 60+组件 ——原始人(按钮、输入、选择、菜单、对话框、表.)和 产品表面(记录表,董事会,命令,ListPage,RichText编辑器...).
- 设计符号 小型语义尺度(
space, (中文(简体) ),radius, (中文(简体) ),text颜色) 自动取光/暗地取光. - 类型 ——每个组件和变体的完整TypeScript类型.
- 路西德图标, (中文(简体) ), CSS 可变主题零运行时间 CSS-in-JS.
安装
npm install @crisp-ui-kit/crisp
# or: bun add @crisp-ui-kit/crisp
反应 18+ 是同级依赖:
npm install react react-dom
简洁的船 无害环境管理和共同JS,所以两者 import 财务报告和审定财务报表 require 工作时 每个
组件还拥有自己的子路径,这就是保持一个组件的导入
小型( 单身) Badge 捆绑到~8 KB :
import { Badge } from "@crisp-ui-kit/crisp"; // barrel — tree-shakes
import { Menu } from "@crisp-ui-kit/crisp/menu"; // or import it directly
使用量
导入样式表 一次 在应用程序根,然后在任何地方使用组件:
// app entry (main.tsx / layout.tsx)
import "@crisp-ui-kit/crisp/base.css"; // optional app baseline
import "@crisp-ui-kit/crisp/styles.css";
如果你的风格需要击败脆饼,请导入 @crisp-ui-kit/crisp/styles.layered.css
改为 styles.css它是相同的 CSS 包裹 @layer crisp-components和任何东西
在一层外写字 胜过层内的任何东西 不管具体或顺序.
base.css 是可选的: 它设置 body字体、背景和文字颜色
脆饼本身的代币(外加箱尺寸和 color-scheme),所以新鲜的应用程序不会
将时代新罗马化为透明背景。 先导入,再导入
styles.css。 。 。 .
styles.css 已包含设计符号,因此一个导入即可.
@crisp-ui-kit/crisp/tokens.css 难得的情况
想要的标志 无 组件样式——主题 另一个库
比如从脆脆的调色板上.
import { Button, Badge, EmptyState } from "@crisp-ui-kit/crisp";
export function Example() {
return (
<div>
<Button intent="primary">Save changes</Button>
<Badge tone="success" dot>
Live
</Badge>
<EmptyState
variant="page"
title="No records yet"
description="Create your first record to get started."
action={<Button intent="primary" size="sm">New record</Button>}
/>
</div>
);
}
他们
颜色和符号是CSS变量. 通过设置切换暗模式 data-theme="dark"
(或 class="dark")在母元素上;每个组件都随之而来。 访问原始符号
在联署材料中通过出口 contract数字 :
import { contract as c } from "@crisp-ui-kit/crisp";
const styles = { padding: c.space["4"], borderRadius: c.radius.md };
构建自己的组件
套装上同样原始的被输出(defineRecipe, (中文(简体) ), resolveRecipe, (中文(简体) ),
Primitive) 这样您就可以以相同的风格编写组件 .
对于新组件,偏好 defineSpec: 它的造型与 数据 ——命名槽
- 而不是作为CSS字符串,以及 specToRecipe 编译到
配方 其他的都已经理解.
import { defineSpec, resolveRecipe, specToRecipe, contract as c } from "@crisp-ui-kit/crisp";
const spec = defineSpec({
name: "callout-lite",
base: { display: "flex", gap: c.space["2"], borderRadius: c.radius.md },
parts: [{ slot: "icon", selector: "& .icon", decls: { flexShrink: 0 } }],
variants: {
tone: {
neutral: { background: c.bgRaised, color: c.fgMuted },
danger: { background: c.bgDanger, color: c.fgOnTone },
},
},
defaultVariants: { tone: "neutral" },
});
export const calloutLite = resolveRecipe(specToRecipe(spec));
变种键存活到类型,所以 VariantProps<typeof calloutLite>["tone"] 实值
"neutral" | "danger" 没有 string弦乐谱只能被重写并寄予希望;
光谱可以是 读取,这就是让非CSS目标拒绝其无法表达的财产
而不是无声地放弃它。 克洛克的原始人正逐个向它移动.
文档
文档网站为每个组件制作一个实时、量度演示。 本地运行 :
cd docs && bun run dev # http://localhost:3000
贷项
{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}他的工作是别人的.
Seed 设计 译者:,
阿帕奇2.0 (英语). 七号 @seed-design/* 软件包驱动 Cript's DatePicker, TimePicker, sliper,
数量 Picker, FileUpload and MiddleTruncate, 以及这些组件的几何—— 加上
WheelPicker, 字段焦点环和几个中性符号值—— 读取自
@seed-design/css 并重塑了舒克的象征角色。 薄薄的分层
多平台的作品如下: ADR 0002 (韩语)。 。 。 .
每个衍生文件都记录了所带走的和改变的;全部归属,包括
SEED Design本身的通知,在 通知。 。 。 .
半径 编剧和编剧 (MIT)用于 asChild, (中文(简体) ),
扎格语Name (麻省理工学院) 为组合盒和对话框状态机器,
卢西德 每一个图标,和 clsx 数据 (麻省理工学院).
简洁不附属于其中任何一个国家,也不由其赞助或认可.
许可证
麻省理工学院 蒙克顿
舒克自己的密码是麻省理工学院 它包括Apache许可证2.0下的作品——见: 通知 财务报告和审定财务报表 许可证/Apache-2.0.txt。 。 。 .