PHPackages sparrowhawk-labs/pinion-ui - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. sparrowhawk-labs/pinion-ui ActiveLibrary[Templating & Views](/categories/templating) sparrowhawk-labs/pinion-ui ========================== Blade UI component system for Laravel — daisyUI semantic colors, Alpine.js interactivity, and Tune design tokens. Pairs with sparrowhawk-labs/pinion-icons. v0.4.0(2w ago)04↓100%[1 issues](https://github.com/sparrowhawk-labs/pinion-ui/issues)MITPHPPHP ^8.2 Since May 13Pushed 1w agoCompare [ Source](https://github.com/sparrowhawk-labs/pinion-ui)[ Packagist](https://packagist.org/packages/sparrowhawk-labs/pinion-ui)[ Docs](https://sparrowhawk-labs.dev)[ RSS](/packages/sparrowhawk-labs-pinion-ui/feed)WikiDiscussions main Synced 1w ago READMEChangelog (1)Dependencies (2)Versions (28)Used By (0) Pinion UI ========= [](#pinion-ui) [![Latest Version on Packagist](https://camo.githubusercontent.com/47da75f4a827fa4f969cae15a5c586536f1dcb1724dae4ded7534dd6eb5a17c8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73706172726f776861776b2d6c6162732f70696e696f6e2d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sparrowhawk-labs/pinion-ui)[![Total Downloads](https://camo.githubusercontent.com/91d01252ae168c9d51e7f5d3891295935e94fae0ff73e3be7794d29b4fbe0baa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f73706172726f776861776b2d6c6162732f70696e696f6e2d75692e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sparrowhawk-labs/pinion-ui)[![License](https://camo.githubusercontent.com/255760128aa9cd1eeb0c49aa512c4f3c01272a6112c55bfc983b8f8d1a6e6168/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f73706172726f776861776b2d6c6162732f70696e696f6e2d75692e7376673f7374796c653d666c61742d737175617265)](LICENSE)[![PHP Version](https://camo.githubusercontent.com/10e8772388d76ab1698e5f5a8c500c3adee1928445ea62696b6f06532ecec60d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f73706172726f776861776b2d6c6162732f70696e696f6e2d75692e7376673f7374796c653d666c61742d737175617265)](composer.json) A Blade UI component library for Laravel built on **Tailwind v4 + daisyUI v5 + Alpine.js**. Ships 46 ready-to-use components and an 11-preset *Tune* token system that lets you reshape spacing, radii, and typography with a single attribute swap — without touching component code. By [Sparrowhawk Labs](https://sparrowhawk-labs.dev) — part of the `pinion-*` series. Hard-requires [`sparrowhawk-labs/pinion-icons`](https://github.com/sparrowhawk-labs/pinion-icons). Features -------- [](#features) - **46 components** — buttons, inputs, selects, checkboxes, radios, toggles, textareas, file-upload, rating, range-slider, input-number, input-group, pin-input, dropdowns, popovers, modals, tabs, sidebars, accordions, collapses, alerts, badges, avatars, cards, tooltips, breadcrumbs, paginations, timelines, indicators, steppers, stats, skeletons, spinners, notification toasts, hero sections, theme-switcher, tune-styles, and more. - **Three orthogonal style layers** — `data-theme` for color, `data-tune` for shape/space/font, Blade props for component variant. Mix freely (`data-theme="dracula" data-tune="playful"`). - **11 Tune presets** — `default`, `minimal`, `sharp`, `soft`, `playful`, `corporate`, `brutal`, `elegant`, `bold`, `pixel`, `tech`. Each preset bundles ~30 CSS custom properties. - **Drop-in CSS preset** — one `@import` wires Tailwind `@source` globs (Blade + Compose-layer PHP) and Tune tokens together. No more "did I scan the right paths?" debugging. - **Compose-layer architecture** — class strings live in typed PHP composers (`InputComposer`, `SelectComposer`, etc.), not scattered in Blade. Variants/sizes/states stay testable and refactor-safe. - **Dual-use output** — render via `` or copy the rendered HTML; it's plain Tailwind + daisyUI + Alpine. - **LLM-native docs** — ships with [`AGENTS.md`](./AGENTS.md) and per-component reference pages under [`reference/components/`](./reference/components/index.md). `php artisan ui:install --ai` wires the entry pointer into your project's `CLAUDE.md` so Claude Code / Cursor / Aider can look up props and gotchas in one place — no hallucinated props, no class-name guesses. Installation ------------ [](#installation) ``` composer require sparrowhawk-labs/pinion-ui php artisan ui:install --ai ``` `ui:install` adds the required npm dependencies (`daisyui ^5`, `alpinejs ^3`, `@alpinejs/focus ^3` — needed by `` and any focus-trap UI), wires up `resources/css/app.css` (single `@import` of the pinion-ui preset) and `resources/js/app.js` (Alpine + focus plugin), and with `--ai` appends a `## pinion-ui (AI agents)` block to your project's `CLAUDE.md` pointing at `vendor/sparrowhawk-labs/pinion-ui/AGENTS.md`. Drop `--ai` to skip the AI snippet — you can re-run later, or copy the contents of `vendor/sparrowhawk-labs/pinion-ui/CLAUDE_SNIPPET.md` into your own `AGENTS.md` if you prefer that convention. Then build: ``` npm install && npm run build ``` ### CSS preset (handled by `ui:install`, here's what it adds) [](#css-preset-handled-by-uiinstall-heres-what-it-adds) ``` @import "tailwindcss"; @plugin "daisyui" { themes: all; } /* Pinion UI preset — wires @source globs and Tune tokens. Path is resolved relative to your app.css. */ @import "../../vendor/sparrowhawk-labs/pinion-ui/src/resources/css/pinion-ui.css"; /* Your own @source globs go AFTER the preset */ @source "../**/*.blade.php"; @source "../**/*.js"; ``` > **Why a preset?**Pinion UI's Compose layer keeps class strings inside PHP (e.g. `bg-primary text-primary-content peer-checked:border-primary/70`). Tailwind v4's default scan only sees `*.blade.php` / `*.js`, so without the preset's `@source` rules those classes are silently dropped from the build. The preset's `@source` paths resolve from the preset file's own location — add a new component in the package and consumer apps keep working, no `app.css` re-edit needed. ### Layout [](#layout) ``` ``` Quick start ----------- [](#quick-start) ``` {{-- Primary action button --}} Save {{-- Form field with label + error --}} {{-- Card with hover lift --}} Card body {{-- Modal with Alpine-driven open state --}} {{-- modal body --}} {{-- Tabs --}} {{-- Hero section --}} ``` Components are registered as **anonymous components** (no prefix needed) for the common case. The fully-qualified `` form is also available if you need to disambiguate. The three style layers ---------------------- [](#the-three-style-layers) LayerAttribute / PropControlsExamples**Theme**`data-theme`Color palette`light`, `dark`, `cyberpunk`, `dracula` (any daisyUI theme)**Tune**`data-tune`Shape, spacing, font, component sizing`default`, `tech`, `elegant`, `playful`**Component**Blade propsVariant, size, behavior`variant="primary"`, `size="lg"`, `dismissible`Theme and Tune are fully orthogonal — any combination works. Tune presets ------------ [](#tune-presets) TuneShapeFont (heading / body)SizingCharacter**default**standard radiusInter / Inter + Noto Sans JPstandardNeutral, all-purpose**minimal**small radius, no shadowInter / Inter + Noto Sans JPairy spacing, smaller textClean, restrained**sharp**no radiusDM Sans + Noto Sans JPslightly smallerGeometric, precise**soft**large radiusNunito + Zen Maru Gothicslightly largerSoft, rounded**playful**maximum radiusFredoka / Quicksand + Zen Maru GothiclargerPlayful, pop**corporate**small radius, no shadowSource Sans 3 + Noto Sans JPcompactSolid, business**brutal**no radius, thick bordersSpace Grotesk + M PLUS 1pslightly largerRaw, impactful**elegant**standard radius, hairline bordersPlayfair Display / Lora + Shippori Minchostandard (wider)Refined, serif**bold**standard radius, thick bordersMontserrat + Noto Sans JP (w900)slightly largerHeavy, strong**pixel**no radius, thick bordersPress Start 2P + DotGothic16slightly largerRetro, dotted**tech**tiny radius, no shadowJetBrains Mono / IBM Plex Sans + M PLUS 1 CodecompactTechnical, denseEach preset writes CSS custom properties across four categories: - **Shape** — `--radius-box`, `--radius-field`, `--radius-selector`, `--border`, `--depth`, `--noise` - **Spacing** — `--space-section`, `--space-section-inner`, `--space-element`, `--space-compact`, `--space-text`, `--space-inline` - **Font** — `--font-heading`, `--font-body`, `--font-mono`, `--font-weight-heading` - **Component Size** — `--h-field-{xs,sm,md,lg}`, `--px-field-{xs,sm,md,lg}`, `--text-field-{xs,sm,md,lg}` Components ---------- [](#components) 46 components organised into 7 groups. See [`reference/components/index.md`](./reference/components/index.md) for the full API reference (props, slots, examples) per component. ### Form (15) [](#form-15) `button`, `button-group`, `input`, `textarea`, `select`, `checkbox`, `radio`, `radio-group`, `toggle`, `file-upload`, `rating`, `range-slider`, `input-number`, `input-group`, `pin-input` ### Data display (12) [](#data-display-12) `card`, `badge`, `avatar`, `avatar-group`, `accordion`, `collapse`, `divider`, `kbd`, `table-scroll`, `timeline`, `stat`, `indicator` ### Feedback (5) [](#feedback-5) `alert`, `progress`, `skeleton`, `spinner`, `notification-system` ### Navigation (7) [](#navigation-7) `tabs`, `menu-item`, `dropdown`, `breadcrumb`, `sidebar`, `pagination`, `pagination-simple` ### Overlay (3) [](#overlay-3) `modal`, `tooltip`, `popover` ### Section (1) [](#section-1) `section.hero` ### Process (1) [](#process-1) `stepper` ### Theme / Tune (2) [](#theme--tune-2) `theme-switcher`, `tune-styles` Most components share a `Compose` layer (`src/Compose/*Composer.php`) that centralises variant / size / state class composition — making behaviour testable and easy to extend. A handful of simple components (button, alert, card, badge, avatar, menu-item, section.hero, theme-switcher, tune-styles) compose their classes inline in the Blade file. Pairs with Pinion Icons ----------------------- [](#pairs-with-pinion-icons) `pinion-ui` hard-requires [`sparrowhawk-labs/pinion-icons`](https://github.com/sparrowhawk-labs/pinion-icons) — install it once, then use `` anywhere alongside `pinion-ui` components: ``` Confirm ``` 7,404 Solar icons across 6 variants, plus Fluent Emoji and Pixelarticons via virtual variants — no extra setup required. Pinion series ------------- [](#pinion-series) Pinion UI is part of the [Sparrowhawk Labs](https://sparrowhawk-labs.dev) `pinion-*` series — Laravel UI plugins built around a shared design language. A *pinion* is a primary flight feather: the stroke that lets a hawk steer. - [`sparrowhawk-labs/pinion-icons`](https://github.com/sparrowhawk-labs/pinion-icons) — unified icon system, hard-required by this package - **`sparrowhawk-labs/pinion-ui`** *(this package)* - `sparrowhawk-labs/sparrowhawk` *(framework core, in design)* Versioning ---------- [](#versioning) Semantic versioning with BC discipline — see [SEMVER.md](./SEMVER.md). TL;DR while in `0.x`: patches are safe to bump, minors may flip defaults (always called out in the release notes), and breaking removals only happen at minor or major boundaries — never in a patch. License ------- [](#license) MIT — see [LICENSE](LICENSE). Credits ------- [](#credits) - [daisyUI v5](https://daisyui.com) by Pouya Saadeghi (MIT) - [Tailwind CSS v4](https://tailwindcss.com) (MIT) - [Alpine.js](https://alpinejs.dev) by Caleb Porzio (MIT) - Maintained by [Akihiko Takai](https://github.com/akihiko-takai) at [Sparrowhawk Labs](https://sparrowhawk-labs.dev) ### Health Score 40 — FairBetter than 86% of packages Maintenance97 Actively maintained with recent releases Popularity5 Limited adoption so far Community6 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 27 Last Release 19d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/0d0d13d86fafedefd34c2b31dd9b85e4080fb156cbf15742200129c1d0e63ff6?d=identicon)[akihikotakai](/maintainers/akihikotakai) --- Top Contributors [![akihiko-takai](https://avatars.githubusercontent.com/u/242943590?v=4)](https://github.com/akihiko-takai "akihiko-takai (50 commits)") --- Tags laraveluicomponentsbladetailwindcssalpinejsDaisyUIsparrowhawk-labspinion ### Embed Badge ![Health badge](/badges/sparrowhawk-labs-pinion-ui/health.svg) ``` [![Health](https://phpackages.com/badges/sparrowhawk-labs-pinion-ui/health.svg)](https://phpackages.com/packages/sparrowhawk-labs-pinion-ui) ``` ### Alternatives [robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k531.0k21](/packages/robsontenorio-mary)[hasinhayder/tyro-login Tyro Login - Beautiful, customizable authentication views for Laravel 12 & 13 2443.7k5](/packages/hasinhayder-tyro-login)[electrik/slate Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project 102.4k1](/packages/electrik-slate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)