Pinion UI Components
pinion-ui

Theme

Tune

Lang

theme × tune, no rewrite

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.

View on GitHub Browse components
data-tune — shape · space · type data-theme — color only
specimen.blade.php · read-only
<html data-theme="" data-tune="">
<!-- one markup, never touched · 1430 pixel-perfect results below -->
<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" />
One code —
1430 professional results
data-theme pinion
data-tune default

 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.

Popular New

Starter

¥2,980/mo

For individuals and small teams. Includes the basic component set.

Recommended New feature

Team

¥9,800/mo

Built for multi-project, multi-person teams. Includes preset saving.

Enterprise SLA

Enterprise

Contact us

The full plan — SLA, dedicated support, and custom token design.

Popular New

Starter

¥2,980/mo

For individuals and small teams. Includes the basic component set.

Recommended New feature

Team

¥9,800/mo

Built for multi-project, multi-person teams. Includes preset saving.

Enterprise SLA

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

Install in 60 seconds

Laravel 11 / 12 
# 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).

AGENTS.md

Components

9 of 46 — pick anything from the sidebar for the full matrix
Form <x-button>

Button

Button View details →
Data display <x-badge>

Badge

primary solid outline dot pill
Badge View details →
Form <x-input>

Input

floating label · iconLeft prop

Input View details →
Overlay <x-modal>

Modal

Alpine-driven dialog with focus trap, ESC + backdrop dismiss.

Modal View details →
Section <x-stepper>

Stepper

  1. Plan
  2. 2
    Build
  3. 3
    Ship
Stepper View details →
Form <x-rating>

Rating

stars
half · heart
Rating View details →
Form <x-toggle>

Toggle

Toggle View details →
Form <x-input-number>

Input Number

Alpine-driven ± with bound clamping

Input Number View details →
Overlay <x-tooltip>

Tooltip

Hover any button below:

Tooltip View details →

What's new

All releases
v0.25.3 Feature

Component ids are the same on every render — so a static export stays byte-identical

The default id of 14 components — <x-input> / <x-select> / <x-toggle> / <x-modal> and friends — is now a per-request counter (email_1, or input_1 without a name) instead of a random uniqid(). Static exports and snapshots come out byte-identical run after run, and a Livewire partial re-render reproduces the same ids. An explicit id still wins, as before. v0.25.2 also paints a checked toggle with the ink, so the ON state reads on every theme.

Released — 2026-10

v0.24.0 Tune

Japanese in corporate / editorial now set in BIZ UD, the universal-design faces

The corporate tune falls back to BIZ UDPGothic for Japanese (was Noto Sans JP) and editorial to BIZ UDPMincho (was Shippori Mincho) — both Morisawa-made, OFL-licensed and served from Google Fonts. Latin faces (IBM Plex Sans / Playfair Display / Source Serif 4) and the data-ja="off" stacks are unchanged. v0.24.1 also makes a checked wire toggle in neutral legible on dark themes.

Released — 2026-10

v0.23.3 Feature

Text 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

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.

GitHub Packagist sparrowhawk-labs.dev pinion-icons

MIT licensed · built with by Sparrowhawk Labs

Powered by Yakaze Tech Studio