Aura UI

Aura UI

Laravel 12/13 + Livewire 3/4 + Alpine.js + Tailwind CSS 4 向けの「Vibrant Depth」UI コンポーネントライブラリです。

Aura UI には、MIT ライセンスで利用できる本番環境対応の Blade コンポーネントが 127 個含まれています。利用にアカウントもライセンスキーも有料プランも必要ありません。グラデーション、グロー、マイクロアニメーション、グラスモーフィズム、完全なダークモードを備えた、統一されたデザインシステムを採用しています。多くのライブラリがフラットでミニマルな方向に進むなか、Aura はプロフェッショナルな品質を保ちながら、意図的にその逆を目指しています。

すべてのコンポーネントを見る → · 機械可読なインデックスはこちらです： /r/registry.json

日付ピッカー、時間ピッカー、ファイルアップロード、オートコンプリート、マルチセレクト、カレンダー、コマンドパレット、QR コード、エディター、Chart.js を利用したチャート、IBAN フィールドや通貨入力といったヨーロッパのビジネス向けフィールドなど、すべて無料パッケージに含まれています。

Aura を選ぶ理由

• 豊富な機能を無料で。 多くのライブラリでは、魅力的なコンポーネントはライセンスが必要です。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 をでっち上げるのではなく、実際のコンポーネント 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 に一覧を重複して掲載していないのは、コンポーネントが追加された時点で README の一覧は古くなるためです。実際、以前の一覧では収録内容の 3 分の 1 しか紹介できていませんでした。

各ページは、人にも機械にも使いやすい 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 を目標としています。ライトモードとダークモードの両方で、111 組の色のコントラストを CI でチェックするため、テーマを変更してもテキストのコントラストが気付かないうちに最低基準を下回ることはありません。

デザインシステム

CSS カスタムプロパティを基盤としています。

• カラー：6 つのセマンティックパレット（プライマリ、セカンダリ、成功、警告、危険、情報）＋サーフェスのスケール
• シャドウ：6 段階のエレベーションレベル＋フォーカス状態向けのカラーグロー効果
• アニメーション：スプリングイージング曲線を使った 14 個のキーフレーム
• グラスモーフィズム：強度 3 段階（控えめ、標準、強め）
• タイポグラフィ：Inter（サンセリフ）＋ JetBrains Mono（等幅）
• ボーダーの角丸：6px から 9999px までの 6 段階スケール

ダークモード

<html> に .dark を追加すると、カラー、シャドウ、グローが自動的に適応します。

<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