包简介

A modern TALL stack component library with Tailwind v4, Livewire 3, and Alpine.js

README 文档

README

A modern TALL stack component library built with Tailwind CSS v4, Livewire 3, and Alpine.js.

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

Install the package via Composer:

composer require stratos/spire-ui

Quick Start (Zero Config)

Add the Blade directives to your layout file:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    @spireStyles
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @spireScripts
    @livewireScripts
</body>
</html>

That's it! No npm install, no build step required. Start using components immediately:

<x-spire::button>Click me</x-spire::button>

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)

For projects that need to customize or bundle Spire UI with their own assets:

1. Import CSS

In your resources/css/app.css:

@import 'tailwindcss';
@import '../../vendor/stratos/spire-ui/resources/css/index.css';

2. Import JavaScript

In your resources/js/app.js:

import { initializeSpireUI } from '../../vendor/stratos/spire-ui/resources/js/index';

initializeSpireUI();

3. Build Assets

npm run build

4. Use Vite in Layout

<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>
<body>
    {{ $slot }}
    @livewireScripts
</body>

Blade Directives

Directive	Description
`@spireStyles`	Outputs CSS link tag for all Spire UI styles
`@spireScripts`	Outputs JS script tags and initializes Alpine components

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

SPIRE_UI_PREFIX=spire
SPIRE_UI_ASSET_ROUTE=spire-ui
SPIRE_UI_DARK_MODE=class

Usage

Components use the configured prefix (default: spire):

<x-spire::button>Click me</x-spire::button>
<x-spire::input label="Name" />
<x-spire::select :options="$options" />

Component Naming Convention

Spire UI uses folder-based components with dot notation:

Parent component: <x-spire::dropdown />
Child component: <x-spire::dropdown.item />

Theming

Spire UI uses semantic color tokens with automatic light/dark mode support.

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

Three-layer elevation system:

Layer	Light Mode	Dark Mode	Usage
`body`	neutral-50	neutral-950	Page background
`surface`	white	neutral-900	Cards, panels
`overlay`	neutral-100	neutral-800	Modals, dialogs

<body class="bg-body text-text">
    <div class="bg-surface border border-border rounded-lg p-6">
        Card content
    </div>
</body>

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

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

Tag	Description
`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

Contributions are welcome! Please read our Contributing Guide and Code of Conduct.

License

MIT License

stratos/spire-ui 适用场景与选型建议

stratos/spire-ui 是一款基于 Blade 开发的 Composer 扩展包，目前已累计 29 次下载、GitHub Stars 达 0，最近一次更新时间为 2025 年 11 月 20 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「ui」「components」「laravel」「alpine」「tailwind」「livewire」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 stratos/spire-ui 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 stratos/spire-ui 我们能提供哪些服务？

定制开发 / 二次开发

基于 stratos/spire-ui 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 stratos/spire-ui 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

meuhmeuhconcept/wkhtmltopdf-alpine 0

Binary of wkhtmltopdf runnable in docker alpine container.

components/webfontloader 2

Web Font Loader gives you added control when using linked fonts via @font-face.

roshangara/wkhtmltopdf-amd64 0

Convert html to pdf using webkit (qtwebkit). Static linked linux binary for amd64 systems.

arc/xml 27

Ariadne Component Library: xml writer and parser Component

arc/cache 1

Ariadne Component Library: Cache Component

arc/config 0

Ariadne Component Library: hierarchical configuration management Component

stratos/spire-ui

包简介

关键字：