No ceiling on how fast you build.
Don't lock the design down — decide as you go. Color, form, and spacing all swap with a single attribute. Pivots take a moment, rework drops to zero. With AI alongside, your creativity shape-shifts and accelerates.
What's new
All releasesSingle-import preset
One pinion-ui.css import wires Tailwind v4, daisyUI v5, and the tune token system in your app.css.
Released — 2026-04
Focus + collapse plugins
ui:install now auto-wires @alpinejs/focus and @alpinejs/collapse — modal focus-trap and accordion height animation just work.
Released — 2026-05
Popover padding prop
New padding prop on <x-popover> so right-click context menus can hug their content tightly.
Released — 2026-05
Built for AI agents
AI agents code with pinion-ui correctly
-
Read
CLAUDE.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 CLAUDE.md + AGENTS.md in your repo root.
Components — a live taste
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-input-number>
Input Number
Alpine-driven ± with bound clamping
<x-tooltip>
Tooltip
Hover any button below:
Ready to build?
Grab the package, scan the components, ship UI.
MIT licensed · built with by sparrowhawk-labs