PHPackages stratos/spire-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. [Utility & Helpers](/categories/utility) 4. / 5. stratos/spire-ui ActiveLibrary[Utility & Helpers](/categories/utility) stratos/spire-ui ================ A modern TALL stack component library with Tailwind v4, Livewire 3, and Alpine.js 1.1.24(5mo ago)029[15 PRs](https://github.com/sabristratos/spire/pulls)MITBladePHP ^8.3CI failing Since Nov 20Pushed 3mo agoCompare [ Source](https://github.com/sabristratos/spire)[ Packagist](https://packagist.org/packages/stratos/spire-ui)[ Docs](https://sabristratos.github.io/spire/)[ RSS](/packages/stratos-spire-ui/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (3)Versions (46)Used By (0) Spire UI ======== [](#spire-ui) A modern TALL stack component library built with Tailwind CSS v4, Livewire 3, and Alpine.js. Features -------- [](#features) - **Modern Stack**: Built on the TALL stack (Tailwind v4, Alpine.js, Laravel 12, Livewire 3) - **Zero Config**: Pre-built assets served via Blade directives - no build step required - **Accessible**: Full keyboard navigation, ARIA attributes, and semantic HTML - **Themeable**: Semantic color tokens with built-in light/dark mode support - **Localized**: i18n support for English, French, and Arabic - **Composable**: Highly flexible components using Blade slots and attributes Installation ------------ [](#installation) Install the package via Composer: ``` composer require stratos/spire-ui ``` Quick Start (Zero Config) ------------------------- [](#quick-start-zero-config) Add the Blade directives to your layout file: ``` @spireStyles @livewireStyles {{ $slot }} @spireScripts @livewireScripts ``` That's it! No npm install, no build step required. Start using components immediately: ``` Click me ``` ### Using the Pre-built Layout [](#using-the-pre-built-layout) Publish the admin layout for a complete starting point: ``` php artisan vendor:publish --tag=spire-ui-layouts ``` This creates `resources/views/components/layouts/admin.blade.php` with a full sidebar + header layout. Advanced Setup (Custom Bundling) -------------------------------- [](#advanced-setup-custom-bundling) For projects that need to customize or bundle Spire UI with their own assets: ### 1. Import CSS [](#1-import-css) In your `resources/css/app.css`: ``` @import 'tailwindcss'; @import '../../vendor/stratos/spire-ui/resources/css/index.css'; ``` ### 2. Import JavaScript [](#2-import-javascript) In your `resources/js/app.js`: ``` import { initializeSpireUI } from '../../vendor/stratos/spire-ui/resources/js/index'; initializeSpireUI(); ``` ### 3. Build Assets [](#3-build-assets) ``` npm run build ``` ### 4. Use Vite in Layout [](#4-use-vite-in-layout) ``` @vite(['resources/css/app.css', 'resources/js/app.js']) @livewireStyles {{ $slot }} @livewireScripts ``` Blade Directives ---------------- [](#blade-directives) DirectiveDescription`@spireStyles`Outputs CSS link tag for all Spire UI styles`@spireScripts`Outputs JS script tags and initializes Alpine componentsConfiguration ------------- [](#configuration) Publish the configuration file to customize component defaults: ``` php artisan vendor:publish --tag=spire-ui-config ``` This creates `config/spire-ui.php` where you can customize: - `prefix` - Component prefix (default: `spire`) - `asset_route` - Route path for serving assets (default: `spire-ui`) - `theme.dark_mode` - Dark mode strategy - `defaults` - Global component defaults (size, radius, placement) - Component-specific settings ### Environment Variables [](#environment-variables) ``` SPIRE_UI_PREFIX=spire SPIRE_UI_ASSET_ROUTE=spire-ui SPIRE_UI_DARK_MODE=class ``` Usage ----- [](#usage) Components use the configured prefix (default: `spire`): ``` Click me ``` ### Component Naming Convention [](#component-naming-convention) Spire UI uses folder-based components with dot notation: - Parent component: `` - Child component: `` Theming ------- [](#theming) Spire UI uses semantic color tokens with automatic light/dark mode support. ### Available Tokens [](#available-tokens) - **Primary**: `primary`, `primary-hover`, `primary-active`, `primary-foreground` - **Secondary**: `secondary`, `secondary-hover`, `secondary-active`, `secondary-foreground` - **Surfaces**: `body`, `surface`, `overlay` (elevation hierarchy) - **Text**: `text`, `text-muted`, `text-disabled` - **Borders**: `border`, `border-hover`, `border-focus` - **States**: `success`, `error`, `warning`, `info` (each with `-hover`, `-bg`, `-foreground`) ### Surface Elevation Hierarchy [](#surface-elevation-hierarchy) Three-layer elevation system: LayerLight ModeDark ModeUsage`body`neutral-50neutral-950Page background`surface`whiteneutral-900Cards, panels`overlay`neutral-100neutral-800Modals, dialogs``` Card content ``` ### Customizing Theme [](#customizing-theme) Publish the theme CSS file: ``` php artisan vendor:publish --tag=spire-ui-css ``` Edit `resources/css/spire-ui-theme.css` to customize colors. Localization ------------ [](#localization) Spire UI supports English, French, and Arabic. Set your application locale: ``` // config/app.php 'locale' => 'en', // or 'fr', 'ar' ``` Publish translations for customization: ``` php artisan vendor:publish --tag=spire-ui-lang ``` Publishing Assets ----------------- [](#publishing-assets) TagDescription`spire-ui-config`Configuration file`spire-ui-views`All component views`spire-ui-lang`Translation files`spire-ui-css`Theme CSS file`spire-ui-layouts`Layout components``` php artisan vendor:publish --tag=spire-ui-config ``` Contributing ------------ [](#contributing) Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) and [Code of Conduct](CODE_OF_CONDUCT.md). License ------- [](#license) MIT License ### Health Score 41 — FairBetter than 89% of packages Maintenance77 Regular maintenance activity Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity63 Established project with proven stability 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 28 Last Release 173d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d87ebbf74a104baab27d995cd55aafaee5da84fa34ccf32a907e5cf22a6c357d?d=identicon)[sabristratos](/maintainers/sabristratos) --- Top Contributors [![sabristratos](https://avatars.githubusercontent.com/u/178621997?v=4)](https://github.com/sabristratos "sabristratos (38 commits)") --- Tags laraveluicomponentslivewiretailwindalpinetall-stack ### Embed Badge ![Health badge](/badges/stratos-spire-ui/health.svg) ``` [![Health](https://phpackages.com/badges/stratos-spire-ui/health.svg)](https://phpackages.com/packages/stratos-spire-ui) ``` ### Alternatives [livewire/flux The official UI component library for Livewire. 9475.0M86](/packages/livewire-flux)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k454.7k15](/packages/robsontenorio-mary)[tanthammar/livewire-window-size Laravel blade directives and php helpers for serverside rendered content, based on browser window size WITHOUT css. Requires Livewire and AlpineJS 2321.0k](/packages/tanthammar-livewire-window-size)[ympact/flux-icons A package to provide icons from different vendors for Livewire Flux. 116.2k](/packages/ympact-flux-icons)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)