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" />
880 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 releasesComponents render correctly on an <html> without data-tune
On an <html> that sets data-theme but omits data-tune, tune tokens failed to resolve and button/input paddings and heights collapsed to 0 — a bare root now renders exactly as data-tune="default". Also in this batch: the light-mode page canvas (base-200/300) on five themes including neotokyo and zen was brightened to match the rest of the lineup, and ui:lint no longer misreports Alpine state values (like view === 'diff') as component classes.
Released — 2026-08
Save/Cancel always reachable in taller-than-viewport modals
An <x-modal> panel taller than the viewport used to clip top and bottom, pushing the actions slot's save/cancel buttons off-screen. The panel is now capped to the viewport height and the content moves into a scrollable body wrapper (min-h-0 overflow-y-auto) — the header and actions stay pinned. When content fits, rendering is unchanged.
Released — 2026-08
File Upload — localization props + Livewire hook
The dropzone's fixed "Browse / or drag and drop here" strings are now per-instance props (browse-label / drop-hint). A bubbling file-upload-change CustomEvent fires on every selection, so $wire.upload() works even inside a teleported modal. Plus the app-brand nonblok / nonblok-dark themes — 40 themes total.
Released — 2026-08
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