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 份逐元件參考文件 - Fresh 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 放入專案根目錄（並在 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 的搶先體驗。