Pinion UI
No ceiling on how fast you build.
One markup, 300+ looks — turn data-tune and shape, spacing and type shift together; turn data-theme and only the color moves. Try anything, commit to nothing — rewriting takes zero time.
<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" />
858 professional results
tune × theme = combinations — Showing /
Get new themes and features first
Check your inbox — click the link in the confirmation email to finish signing up.
That did not go through. You can subscribe here instead.
1–2 emails a month. Unsubscribe any time.
Starter
¥2,980/mo
For individuals and small teams. Includes the basic component set.
Team
¥9,800/mo
Built for multi-project, multi-person teams. Includes preset saving.
Enterprise
Contact us
The full plan — SLA, dedicated support, and custom token design.
Starter
¥2,980/mo
For individuals and small teams. Includes the basic component set.
Team
¥9,800/mo
Built for multi-project, multi-person teams. Includes preset saving.
Enterprise
Contact us
The full plan — SLA, dedicated support, and custom token design.
Tune
Same UI, different "breathing room"
Flip one attribute — the whole spatial rhythm changes.
Q. It's the exact same component — so why does the whole feel change this much?
A. Corner roundness and shadow character shift quietly too.
Built for AI agents
AI agents code with pinion-ui correctly
-
Read
AGENTS.mdonce for project conventions -
AGENTS.mdguides the per-component lookup workflow -
46 per-component reference docs under
reference/components/ - Fresh-Laravel install verified — drop the package into any new app and it builds
Install in 60 seconds
# 1. Require the package
composer require sparrowhawk-labs/pinion-ui
# 2. Install assets + AGENTS.md scaffolding
php artisan ui:install --ai
# 3. Build & run
npm run build && php artisan serve
--ai drops AGENTS.md in your repo root (plus a one-line CLAUDE.md import, so Claude Code picks it up too).
Components
9 of 46 — pick anything from the sidebar for the full matrix<x-modal>
Modal
Alpine-driven dialog with focus trap, ESC + backdrop dismiss.
Welcome to pinion-ui
46 components, all themable, all documented for AI agents. Press Esc or click outside to close.
<x-tooltip>
Tooltip
Hover any button below:
What's new
All releases3 new Mood themes
Added frost (Zenn-like sky blue), ember (claude.ai-like warm clay), and solar (Solarized-derived) — all WCAG-AA, bringing the lineup to 39 themes.
Released — 2026-07
Tune-neutral switcher chrome
New <x-settings-switcher>. <x-theme-switcher> and friends no longer inherit the active tune's font — a control that changes the tune isn't re-rendered by it anymore.
Released — 2026-07
Dropdown/popover/tooltip centering fixed in grids
<x-dropdown>, <x-popover>, and <x-tooltip> panels drifted sideways inside a CSS Grid or column-flex parent due to stretch — fixed with an explicit w-fit.
Released — 2026-07
Get new themes and features first
Updates on Pinion UI, plus early access to Laravel Sparrowhawk — our upcoming framework.
Check your inbox — click the link in the confirmation email to finish signing up.
That did not go through. You can subscribe here instead.
1–2 emails a month. Unsubscribe any time.
Ready to build?
Grab the package, scan the components, ship UI.
MIT licensed · built with by Sparrowhawk Labs
Powered by Yakaze Tech Studio