Pinion UI
构建速度，没有上限。
同一份标记，300 多种样貌。转动 data-tune，形状、间距与字体一起变化；转动 data-theme，只有颜色改变。想试就试，重写的时间是零。
<h1>Balance is the default.</h1> <p class="lead">Set once, travels together.</p> <x-button color="primary" icon="rocket">Ship it</x-button> <x-badge color="success">Active</x-badge> <x-input label="Email" /> <x-progress :value="68" /> <x-rating :value="4" />
990 种专业级设计
tune × theme = 种组合 — 当前显示 /
抢先获取新主题与新功能
Starter
¥2,980/月
适合个人及小型团队。包含基础组件套装。
Team
¥9,800/月
支持多项目、多人协作。含预设保存功能。
Enterprise
联系我们
含 SLA、专属支持与定制令牌设计的完整方案。
Starter
¥2,980/月
适合个人及小型团队。包含基础组件套装。
Team
¥9,800/月
支持多项目、多人协作。含预设保存功能。
Enterprise
联系我们
含 SLA、专属支持与定制令牌设计的完整方案。
Tune
同样的界面，不同的"留白"
只需切换 tune，空间设计就会改变。
Q. 明明是同样的组件，为什么整体印象却完全不同？
A. 圆角与阴影的表情，其实也在悄悄变化。
为 AI 代理而生
AI 代理能正确编写 pinion-ui
-
一次性阅读
AGENTS.md了解项目约定 -
AGENTS.md指导每个组件的查询工作流 -
reference/components/下有 46 份每组件参考文档 - 全新 Laravel 安装已验证 — 将包导入任何新应用，立即构建
60 秒快速安装
# 1. 添加包
composer require sparrowhawk-labs/pinion-ui
# 2. 安装资产 + AGENTS.md 脚手架
php artisan ui:install --ai
# 3. 构建 & 运行
npm run build && php artisan serve
加上 --ai 会将 AGENTS.md 放在你的 repo 根目录（并在 CLAUDE.md 中加入一行导入，供 Claude Code 使用）。
组件
46 个中的 9 个 — 从侧边栏选择任何组件查看完整矩阵<x-modal>
Modal
由 Alpine 驱动的对话框，带焦点陷阱、ESC 和背景关闭。
欢迎来到 pinion-ui
46 个组件，全部主题化，全部为 AI 代理编写文档。按 Esc 或点击外部关闭。
最新发布
所有发布primary 色的文字、边框、聚焦环与柔和徽章，如今在所有主题（含 Tonal 系）上都清晰可读——无需改动标记
每套主题新增 --pn-ink：primary 作为文字已达 4.5:1 对比度时原样保留，否则将其明度向 base-content 推移至 5.0:1（Tonal 系及 pop / vapor 等）。预设会自动把前景工具类——text-primary、border-primary、ring-primary、N ≤ 50 的 bg-primary/N——指向该色，进度条与步骤条 / 时间线的连接线也改用 bg-ink-primary 绘制。作为面的 bg-primary 保持不变，因此现有标记一行都不用改。
发布时间 — 2026-09
新增 6 对同色调主题——低调、不抢戏的“底色”配色可直接选用
主题切换器新增 Tonal 分类——carbon / glyph / noir（三套无彩色），以及由现有主题派生的 tide（solar）/ nocturne（neotokyo）/ clay（ember），共 6 对亮/暗主题，primary·secondary·accent 与底色同一色相。暗色模式下 primary 保持深色调，侧边栏导轨与 primary 按钮不会反转成浅色面板。<x-theme-tune-switcher> 会自动显示新分组，阵容现为 46 对（92 套主题）。
发布时间 — 2026-09
下拉菜单可撑满侧边栏底部或表单行
<x-dropdown> 新增 block 属性 — 根元素撑满父容器，面板两端对齐，账户菜单放进侧边栏栏位或表单行时无需计算 width。同批新增 <x-menu-divider>，用一条延伸到面板两端的分隔线为菜单行分组；<x-theme-tune-switcher> 新增 align="left"，切换器靠近屏幕左缘（如侧边栏底部）时 256px 的面板不再溢出屏幕。
发布时间 — 2026-09
抢先获取新主题与新功能
Pinion UI 的更新，以及开发中的框架 Laravel Sparrowhawk 的抢先体验。