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" />
880 种专业级设计
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 或点击外部关闭。
最新发布
所有发布比 viewport 更高的模态框也能始终点击保存/取消
修复 <x-modal> panel 高于 viewport 时上下被裁切、actions slot 的保存/取消按钮跑到屏幕外无法点击的问题。panel 现在被限制在 viewport 高度内，正文移入可滚动的 body 容器（min-h-0 overflow-y-auto）— header 和 actions 始终固定可见。内容放得下时渲染与之前完全一致。
发布时间 — 2026-08
File Upload 支持文案本地化与 Livewire 挂钩
dropzone 固定的 "Browse / or drag and drop here" 文案现可通过 browse-label / drop-hint 按实例覆盖。选择文件时会冒泡派发 file-upload-change CustomEvent，即使在 teleport 的模态框内也能直接接入 $wire.upload()。另新增 app 品牌主题 nonblok / nonblok-dark，主题总数达到 40 个。
发布时间 — 2026-08
全面排查并修复连结 UI 的边界线
在 <x-pagination>、<x-button-group>、<x-stat-group> 等把多个元素连成一体的 UI 中，活动元素的边缘会显得更粗、选中分段的边缘残留灰色 — 通过全页面 × 主题/tune 的 computed-style 审查逐一修复。
发布时间 — 2026-08
抢先获取新主题与新功能
Pinion UI 的更新，以及开发中的框架 Laravel Sparrowhawk 的抢先体验。