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 份逐元件參考文件 - 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 或點擊外部區域關閉。
最新發布
所有版本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 的搶先體驗。