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" />
1430 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 releasesText and borders at a readable darkness on every theme
Line uses of secondary / accent / neutral / info / success / warning / error — text, borders, rings, progress fills — now resolve to --pn-ink-<name> by the rule primary has followed since v0.17.0 (≥ 4.5:1 on all 110 theme blocks). text-warning shifts toward olive on light themes and text-neutral becomes a readable grey on dark ones; filled bg-warning buttons stay yellow. Solid faces and hover-filled outline faces also lose their 1px rim (v0.23.1–0.23.2). No markup changes.
Released — 2026-10
A cream-and-cocoa theme and a puffy, clay-like tune — so friendly quizzes and forms take just two attributes
New Mood pair macaron / macaron-dark and new tune plush. macaron is a cream canvas (#F7F1E8) with cocoa ink, a denim primary, sage secondary and terracotta accent; plush builds on soft with a ≈22px box radius, a two-layer soft shadow and rounded type (Fredoka / Nunito / M PLUS Rounded 1c). The lineup is now 55 themes × 13 tunes and the switcher picks both up automatically — no existing theme or tune changes value.
Released — 2026-10
A warm paper-and-ink Tonal theme where red appears only as a warning lamp — for calm screens whose one alarm still stands out
New Tonal pair signal / signal-dark: achromatic warm paper (#F2F2EF) × ink (#0D0D0D), with primary and secondary one step off the canvas and a deep-grey accent. The single red (#E0322B) is carried only by the error status colour, so it reads as an indicator lamp — never a surface or a link; dark mode inverts paper and ink. The lineup is now 54 themes (108 light/dark variants), and the theme switcher picks it up automatically.
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