Aura UI

Aura UI

面向 Laravel 12/13 + Livewire 3/4 + Alpine.js + Tailwind CSS 4 的「Vibrant Depth」UI 组件库。

Aura UI 提供 127 个可用于生产环境的 Blade 组件，采用 MIT 许可证——使用它们无需账户、许可证密钥或付费套餐。所有组件共用一套设计系统：渐变、发光、微动画、玻璃拟态和完整的深色模式。多数库都走扁平、极简的路线，而 Aura 则有意反其道而行，同时保持专业感。

浏览所有组件 → · 可供机器读取的索引位于 /r/registry.json

日期选择器、时间选择器、文件上传、自动补全、多选、日历、命令面板、QR 码、编辑器、基于 Chart.js 的图表，以及 IBAN 字段和货币输入框等欧洲商务字段——全部包含在免费软件包中。

为什么选择 Aura

• 丰富且免费。 多数库会把有意思的组件设为付费内容。这里的日历、命令面板、日期选择器和图表组件（折线图、柱状图、饼图、圆环图、面积图）均采用 MIT 许可证。
• 掌控代码。 php artisan aura:add button 会将组件源码复制到你的应用中。你可以继续将 Aura 作为依赖，也可以带着文件离开——由你选择，不会被锁定。
• 无障碍性经过测试，而非口头宣称。 CI 会检查 111 组颜色搭配是否符合 WCAG 对比度阈值；php artisan aura:doctor --a11y 会对你的 Blade 模板执行相同检查。
• 专为 AI 助手阅读而构建。 每个文档页面都可在 URL 后添加 .md，以原始 Markdown 格式访问；文档已编入 llms.txt，还提供 MCP 服务，让你的助手可以查询真实的组件 API，而不是凭空编造。
• 此软件包包含 1,233 项测试（截至 2026-08-09）。

要求

• PHP 8.3+
• Laravel 12 或 13
• Tailwind CSS 4

Livewire 为可选项——这些组件是匿名 Blade 组件，无需 Livewire 也能使用。

安装

composer require bluestarsystem/aura-ui
php artisan aura:install

在应用中导入 CSS：

/* resources/css/app.css */
@import "vendor/aura-ui/aura.css";

如果你愿意，也可以单独发布：

php artisan vendor:publish --tag=aura-ui-config
php artisan vendor:publish --tag=aura-ui-css
php artisan vendor:publish --tag=aura-ui-views

快速开始

{{-- Button --}}
<x-aura::button variant="primary" size="lg">Save Changes</x-aura::button>

{{-- Input with label and error --}}
<x-aura::input label="Email" type="email" wire:model="email" error="{{ $errors->first('email') }}" />

{{-- Card with header --}}
<x-aura::card shadow="lg">
    <x-slot:header>
        <x-aura::card.title>Dashboard</x-aura::card.title>
    </x-slot:header>
    Your content here.
</x-aura::card>

{{-- Modal --}}
<x-aura::modal name="confirm-delete" max-width="sm">
    <p>Are you sure?</p>
</x-aura::modal>

{{-- Alert --}}
<x-aura::alert variant="success" dismissible>Operation completed.</x-aura::alert>

组件

完整目录包含所有组件的实时预览和属性，详见 aura-ui.com/components。

这里特意不再重复列出：README 中的列表在新增组件时就会过时，而这里的列表确实如此——它只介绍了实际软件包中三分之一的内容。

每个页面也都提供 Markdown 版本，供人和机器阅读，例如： /docs/components/button.md。

掌控代码

php artisan aura:init                 # prepare the destination and publish the CSS
php artisan aura:add button card      # copy the source into your project
php artisan aura:add table --dry-run  # see what it would write first

复制的组件归你所有：可以随意编辑，也可以按需移除依赖。

无障碍性

php artisan aura:doctor          # setup and component-usage problems
php artisan aura:doctor --a11y   # plus the accessibility checks, on your own views

组件以 WCAG 2.1 AA 为目标。CI 会在浅色和深色模式下检查 111 组颜色搭配的对比度，确保主题变更不会悄然使文本低于最低标准。

设计系统

基于 CSS 自定义属性构建：

• 颜色：6 种语义调色板（primary、secondary、success、warning、danger、info）+ 表面色阶
• 阴影：6 个高度层级 + 用于聚焦状态的彩色辉光效果
• 动画：14 个关键帧，采用弹簧缓动曲线
• 玻璃拟态：3 个强度级别（subtle、standard、strong）
• 排版：Inter（无衬线）+ JetBrains Mono（等宽）
• 边框圆角：6 级刻度，从 6px 到 9999px

深色模式

将 .dark 添加到 <html>；颜色、阴影和辉光会自动适配。

<html class="dark">

主题设置

:root {
    --aura-primary-500: #8b5cf6; /* Change primary to violet */
    --aura-radius-md: 12px;      /* Rounder corners */
}

完整指南：主题设置 · 深色模式。

翻译

内置英语和意大利语文本；发布 aura-ui-lang 即可添加自己的语言。

交互式体验区

访问应用中的 /aura/playground，即可在线浏览所有组件：

// config/aura-ui.php
'playground' => [
    'enabled' => env('AURA_PLAYGROUND', true),
],

测试

composer install
vendor/bin/pest

链接

• 文档 — 完整文档、实时预览和交互式体验区
• 所有组件 · 面向 AI 助手的 llms.txt
• 更新日志

许可证

MIT 许可证。详情请参阅 LICENSE。

致谢

• Juri Montico — BlueStarSystem