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 releasesSave/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
Joined-UI seams audited and fixed
In joined controls like <x-pagination>, <x-button-group>, and <x-stat-group>, the active element's edge could render thicker or stay gray. A computed-style seam audit across every page × theme/tune combination flushed them out — all fixed.
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