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" />
1272 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 releasesA hairline-only appearance="wire", eight Nothing-flavoured themes and the dot-matrix proto tune — a minimal, retro-future look from the same components
appearance="wire" lands on <x-checkbox> / <x-radio> / <x-toggle> / <x-input> / <x-textarea> / <x-button> / <x-badge>: a transparent shell with a single base-content hairline, colour only as the fill on check / hover, corners following the tune (square under sharp / proto). The lineup grows to 53 themes with eight new light/dark pairs — Mood led / synth / phosphor / nixie and Tonal moss / quartz / midnight / glacier — and the 12th tune proto brings capsule tiles, pill fields, square selectors and dot-matrix Doto headings (h1–h3).
Released — 2026-09
Primary-colored text, borders, focus rings and soft badges now read on every theme — including the Tonal family — with no markup change
Every theme now carries --pn-ink: primary itself where it already reads at 4.5:1 or better as text, otherwise primary with its lightness pushed toward base-content until it reaches 5.0:1 (the Tonal set, pop, vapor and friends). The preset routes the foreground utilities — text-primary, border-primary, ring-primary, bg-primary/N with N ≤ 50 — to it automatically, and progress bars plus stepper / timeline connectors are drawn with bg-ink-primary. Surfaces (bg-primary) are untouched, so nothing in your markup changes.
Released — 2026-09
Six tone-on-tone theme pairs join the lineup — quiet, characterless palettes that let your content lead
A new Tonal category in the theme switcher — carbon / glyph / noir (three monochromes) plus tide (from solar), nocturne (from neotokyo) and clay (from ember): six light/dark pairs whose primary, secondary and accent all share the base hue. In dark mode primary stays a dark tone, so sidebar rails and primary buttons never invert into a light panel. <x-theme-tune-switcher> shows the group automatically, and the lineup is now 46 pairs (92 themes).
Released — 2026-09
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