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" />
1430 種專業級設計
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 或點擊外部區域關閉。
最新發布
所有版本文字與邊框在任何主題下都是可讀的深度
secondary / accent / neutral / info / success / warning / error 用於文字、邊框、光環、進度條等「線條」時，現在與 primary 遵循同一規則，解析為 --pn-ink-<name>（110 個主題區塊全部 ≥ 4.5:1）。text-warning 的黃色在淺色主題上偏向橄欖色，深色主題上的 text-neutral 變為可讀的灰色；填滿的 bg-warning 按鈕保持黃色。同時去掉了 solid 面與 hover 時填滿的 outline 面上的 1px 邊緣（v0.23.1–0.23.2）。無需修改標記。
發布於 — 2026-10
米白底色配可可色文字，再加上圓潤飽滿的黏土風調音——只需兩個屬性，就能做出親切柔和的測驗與表單
Mood 組新增 macaron / macaron-dark，調音新增 plush。macaron 為奶油色底（#F7F1E8）× 可可色文字，primary 為丹寧藍、secondary 為鼠尾草綠、accent 為陶土色；plush 以 soft 為基礎，圓角放大到約 22px，配上雙層柔和陰影與 Fredoka / Nunito / M PLUS Rounded 1c 的圓體字。陣容增至 55 套主題 × 13 套調音，右上角的切換器會自動列出（現有主題與調音的數值不變）。
發布於 — 2026-10
溫暖的紙與墨 Tonal 主題——紅色只作為警示燈出現，安靜的介面裡唯一的異常依然醒目
Tonal 組新增 signal / signal-dark：無彩色的暖紙（#F2F2EF）× 墨（#0D0D0D），primary / secondary 是比底色偏一級的紙色，accent 為深灰。唯一的紅色（#E0322B）只用於 error 狀態色，因此讀起來是指示燈，而不是面或連結；暗色模式下紙與墨互換。主題陣容增至 54 套（亮/暗共 108 種），主題切換器自動列出。
發布於 — 2026-09
搶先取得新主題與新功能
Pinion UI 的更新，以及開發中的框架 Laravel Sparrowhawk 的搶先體驗。