册页
v0.16.0归白
一套给软件、写作与摄影用的纯白单色设计系统。底是纸白，记号是近黑，文件里剩下的唯一彩色是状态——它绑定在状态上，永远不绑定品牌。
- 组件
- 115
- Token
- 182
- 亮色与暗色
- 圆角级数
- 5
- 一个系数带动全部
- 带模糊的阴影
- 0
- 深度是一条细线
安装
pnpm add @misoto22/folio六个运行时依赖——Radix 负责没人该重写的行为，cmdk 负责 combobox 模式，react-day-picker 负责日历，Remix Icon 负责图标，sonner 负责 toast，clsx 加 tailwind-merge 负责让类名冲突按调用方的意思解决。没有路由、没有状态库、没有 CSS-in-JS。
// Once, at your app root — the compiled stylesheet carries the tokens,
// the utilities the components use, and the vendored faces.
import '@misoto22/folio/styles.css'
import { Button, Field, Input } from '@misoto22/folio'
export function SignIn() {
return (
<form className="flex flex-col gap-4">
<Field label="Email" required>
<Input type="email" />
</Field>
<Button type="submit">Continue</Button>
</form>
)
}基础
组件
表单
展示
图表
图示
已经在用 Tailwind？
把可移植的 token 层单独拿走，省掉第二份工具类。模式是 <html> 上的一个属性，所以它可以在首次绘制前写好，永远不会闪出错误的主题。
/* An app that already compiles Tailwind takes the token layers only, and
skips a second copy of the utilities. */
@import 'tailwindcss';
@import '@misoto22/folio/tokens.css';
@import '@misoto22/folio/semantic.css';
@import '@misoto22/folio/keyframes.css';
/* Generate the utilities the library's own components use. */
@source '../node_modules/@misoto22/folio/dist';
@custom-variant dark (&:is([data-mode='dark'] *));<!-- The mode is an attribute on <html>, so it can be written before first
paint and never flashes the wrong theme. -->
<html data-mode="dark">// Every component merges your className LAST, through tailwind-merge — so a
// conflicting utility replaces the built-in one instead of racing it in the
// stylesheet.
<Button className="px-2">Tight</Button>
// → px-2 wins; the base px-6 is dropped, not emitted alongside it.你是 agent 在读这一页？
这里的一切都写了两遍。页面给人看；其余是同样的内容，写给不渲染 CSS 的读者——每个属性连同类型、键盘约定、完整示例源码，按一次顺序读排好。
如果你已经装了它
# One component in full — every prop with its type and default, the exported
# unions, the keyboard contract, the accessibility promises, the examples.
npx @misoto22/folio docs Button
# It resolves parts and types too, which is what you hold when an import fails.
npx @misoto22/folio docs CardBody
# Install the skill under .claude/skills/, and point AGENTS.md at it.
npx @misoto22/folio init --agents-md包会自己描述自己，依据的是 node_modules 里那个版本，而不是这个站点最后一次发布的内容——两者不一致时，那份才是对的。单个组件约 500 token，全部 115 个加起来是它的几十倍。
skill 装的是 agent 凭习惯最容易写错的那些约定：和 shadcn/ui 分岔的命名，以及颜色永远不写成裸类名。在真正碰到这个包之前，它只占名字和描述的大约 110 token。
init 会把 skill 写到 .agents/skills/——Codex、Cursor、Copilot、Gemini CLI、OpenCode、Cline、Zed、Warp 共用这个路径——项目里已经有 .claude/ 时也写一份进去。其他 agent 用 npx skills add Misoto22/folio，不需要任何配置。
如果你只是路过这里
- /llms.txt索引——这套系统是什么，以及每个组件一条链接。
- /llms-full.txt全部内容合成一个文件。
- /components/button/llms.txt单个组件，单独一份。
- /components/button.md同一份文件，用你会去猜的那个扩展名。
写错的时候
有几种误用是静默失败的：Field 的子元素是个包装层时，label 会接到那个盒子上；icon-only 的 Button 没有可读名字时渲染完全正常，而屏幕阅读器读不到。文档只能帮到已经去查的人，而问题恰恰是没人提醒他去查——所以组件在出问题的地方直接说出来，带上出错的字段和一句祈使的修法。这些都不会进生产包。
- ARTICLE_HTML_AND_CHILDREN
- BREADCRUMB_CRUMB_NOT_LINKED
- BUTTON_ICON_ONLY_UNNAMED
- CLIPBOARD_WRITE_REJECTED
- DIAGRAM_ACCENT_ON_CONTAINER
- DIAGRAM_CELL_COLLISION
- DIAGRAM_DIRECTION_ON_LEAF
- DIAGRAM_DUPLICATE_ID
- DIAGRAM_EDGE_DANGLING
- DIAGRAM_LANE_UNKNOWN
- DIAGRAM_REF_UNKNOWN
- DIAGRAM_SPEC_MUTATED
- DIAGRAM_STAGE_OUT_OF_RANGE
- DIALOG_TITLE_MISSING
- FIELD_CONTROL_NOT_LABELLABLE
- FIELD_CONTROL_NOT_WIRED
- REQUIRED_NAME_BLANK
- SEARCHABLE_MENU_LABEL_UNREADABLE