# Aura UI > Aura UI is a "Vibrant Depth" UI component library for Laravel 12 + Livewire 3/4 + Alpine.js + Tailwind CSS 4. It ships 70+ accessible Blade components (free + Pro), a Filament v4/v5 theme system, dark mode, and CSS-variable theming. Components are used as Blade tags, e.g. , , . Free package: bluestarsystem/aura-ui (MIT). Pro package: bluestarsystem/aura-ui-pro. Filament theme: bluestarsystem/aura-filament. All component documentation pages are also available as raw Markdown by appending `.md` to the URL. ## Getting Started - [Introduction](https://aura-ui.com/docs/getting-started.md): Get started with Aura UI, a beautiful Blade component library for Laravel. - [Installation](https://aura-ui.com/docs/installation.md): Install and configure Aura UI in your Laravel project. - [CLI (aura:add)](https://aura-ui.com/docs/getting-started/cli.md): Copy Aura component source into your project and own the code, shadcn-style. - [Blocks](https://aura-ui.com/docs/blocks.md): Blocks component documentation. - [Configuration](https://aura-ui.com/docs/configuration.md): Configure Aura UI component behavior, prefix, icons, and defaults. - [Theming](https://aura-ui.com/docs/theming.md): Customize the Aura UI design system to match your brand identity. - [Theme Studio](https://aura-ui.com/docs/theme-studio.md): Theme Studio component documentation. - [Dark Mode](https://aura-ui.com/docs/dark-mode.md): Set up and customize dark mode for your Aura UI application. - [Upgrading](https://aura-ui.com/docs/upgrading.md): Upgrade Aura UI to the latest version and handle breaking changes. ## Free Components - [Accordion](https://aura-ui.com/docs/components/accordion.md): Collapsible content panels for organizing information into expandable sections. - [Alert](https://aura-ui.com/docs/components/alert.md): Contextual feedback messages for user actions and system events. - [Autocomplete](https://aura-ui.com/docs/components/autocomplete.md): Searchable input field with dropdown suggestions, supporting both static options and Livewire server-side search. - [Avatar](https://aura-ui.com/docs/components/avatar.md): Visual representation of a user or entity with image, initials, or icon fallback. - [Badge](https://aura-ui.com/docs/components/badge.md): Small status indicators and labels for categorization, counts, and states. - [Brand](https://aura-ui.com/docs/components/brand.md): A brand identity component that combines a logo image and application name into a navigable link. - [Breadcrumbs](https://aura-ui.com/docs/components/breadcrumbs.md): Navigation aid showing the current page location within a hierarchical structure. - [Button](https://aura-ui.com/docs/components/button.md): Interactive button element with multiple variants, sizes, icons, loading state, and link mode. - [Calendar](https://aura-ui.com/docs/components/calendar.md): Interactive calendar component with month, week, and day views, event display, color-coded categories, timed events, and locale support. - [Card](https://aura-ui.com/docs/components/card.md): Container component for grouping related content with header, body, and footer sections. - [Chart](https://aura-ui.com/docs/components/chart.md): Data visualization component powered by Chart.js, supporting line, bar, pie, doughnut, and area chart types. - [Checkbox](https://aura-ui.com/docs/components/checkbox.md): Form input for boolean selections with label, description, and Livewire support. - [Collapsible](https://aura-ui.com/docs/components/collapsible.md): A show/hide content component with smooth expand and collapse transitions. - [Countdown](https://aura-ui.com/docs/components/countdown.md): A countdown timer component that counts down to a target date or from a specified number of seconds. - [Command Palette](https://aura-ui.com/docs/components/command-palette.md): Keyboard-driven command launcher with search, grouping, and shortcut display, activated with Ctrl+K. - [Context Menu](https://aura-ui.com/docs/components/context-menu.md): A right-click context menu with viewport-aware positioning, powered by Alpine.js. - [Date Picker](https://aura-ui.com/docs/components/date-picker.md): Calendar-based date selection input with min/max constraints, time selector, locale support, and customizable format. - [Description List](https://aura-ui.com/docs/components/description-list.md): Key-value pair display for structured data like details, metadata, and summaries. - [Diff](https://aura-ui.com/docs/components/diff.md): A before/after comparison component with side-by-side and stacked layout options. - [Drawer](https://aura-ui.com/docs/components/drawer.md): A slide-out panel component that appears from any edge of the screen with overlay and smooth transitions. - [Dropdown](https://aura-ui.com/docs/components/dropdown.md): Toggleable overlay menu for actions, navigation, and context menus. - [Editor](https://aura-ui.com/docs/components/editor.md): Lightweight free WYSIWYG editor with a basic formatting toolbar (bold, italic, underline, strikethrough, headings, lists, links) and HTML output. - [Empty State](https://aura-ui.com/docs/components/empty-state.md): Placeholder display for when no data is available, with icon, message, and call-to-action. - [FAB](https://aura-ui.com/docs/components/fab.md): A floating action button component with configurable position, size, color, and expandable action menu. - [Field](https://aura-ui.com/docs/components/field.md): A form field wrapper that provides a label, hint text, error message, and required indicator around any input. - [File Upload](https://aura-ui.com/docs/components/file-upload.md): Drag-and-drop file upload input with preview, size validation, and Livewire integration for server-side handling. - [Form](https://aura-ui.com/docs/components/form.md): Form container with section layout, grid support, and action alignment. - [Header](https://aura-ui.com/docs/components/header.md): A page or section header with title, description, and an actions slot for buttons. - [Heading](https://aura-ui.com/docs/components/heading.md): Semantic heading component with automatic sizing based on heading level. - [Icon](https://aura-ui.com/docs/components/icon.md): Inline SVG icon system with 150+ built-in icons in multiple sizes. - [Indicator](https://aura-ui.com/docs/components/indicator.md): A badge overlay component for displaying notification dots, counts, or status markers on any element. - [Input](https://aura-ui.com/docs/components/input.md): Text input field with label, prefix/suffix, icons, validation errors, and Livewire support. - [Kbd](https://aura-ui.com/docs/components/kbd.md): A keyboard key display component for showing keyboard shortcuts and key combinations. - [Layout](https://aura-ui.com/docs/components/layout.md): Structural primitives for page layout — container, layout, main, and aside components. - [List](https://aura-ui.com/docs/components/list.md): A styled list component with support for icons, dividers, and multiple visual variants. - [Modal](https://aura-ui.com/docs/components/modal.md): A dialog overlay component with backdrop, transitions, and support for named modals triggered via Alpine.js or Livewire events. - [Multiselect](https://aura-ui.com/docs/components/multiselect.md): A searchable multi-value select dropdown that binds an array of selected values via wire:model. - [Navbar](https://aura-ui.com/docs/components/navbar.md): A responsive top navigation bar with brand, menu items, actions, and mobile drawer support. - [OTP](https://aura-ui.com/docs/components/otp.md): Numeric one-time password input with N individual digit boxes, auto-focus progression, and paste support. - [Pagination](https://aura-ui.com/docs/components/pagination.md): A navigation component for paginated data, designed to work seamlessly with Laravel paginators and Livewire. - [Popover](https://aura-ui.com/docs/components/popover.md): A floating content panel that appears on click or hover, supporting multiple positions and glass morphism styling. - [Profile](https://aura-ui.com/docs/components/profile.md): A compact user identity component combining an avatar, name, and optional subtitle. - [Progress](https://aura-ui.com/docs/components/progress.md): A horizontal progress bar component with support for colors, sizes, labels, striped patterns, and animation. - [Radial Progress](https://aura-ui.com/docs/components/radial-progress.md): A circular progress indicator with configurable value, size, color, and optional percentage label. - [Radio](https://aura-ui.com/docs/components/radio.md): A radio button input component with label and description support, designed for use individually or within a radio group. - [Rating](https://aura-ui.com/docs/components/rating.md): An interactive star rating component with support for readonly display, custom max values, sizes, and colors. - [Select](https://aura-ui.com/docs/components/select.md): A styled dropdown select input with label, hint, error states, and a sub-component for options. - [Separator](https://aura-ui.com/docs/components/separator.md): A visual divider to separate content sections, supporting horizontal and vertical orientations with optional labels. - [Skeleton](https://aura-ui.com/docs/components/skeleton.md): A placeholder loading component that mimics content layout while data is being fetched. - [Slider](https://aura-ui.com/docs/components/slider.md): Range slider input for selecting numeric values within a defined range, with optional value display, color variants, and prefix/suffix labels. - [Spinner](https://aura-ui.com/docs/components/spinner.md): An animated loading indicator component with size and color variants. - [Stats Card](https://aura-ui.com/docs/components/stats-card.md): A compact card component for displaying key metrics with optional change indicators and icons, ideal for dashboards. - [Subheading](https://aura-ui.com/docs/components/subheading.md): Secondary descriptive text to pair with headings for additional context. - [Swap](https://aura-ui.com/docs/components/swap.md): A toggle component that swaps between two visual states with optional rotation or flip animations. - [Table](https://aura-ui.com/docs/components/table.md): A styled, composable table component for displaying tabular data with striped, hoverable, bordered, and compact variants. - [Tabs](https://aura-ui.com/docs/components/tabs.md): Tabbed interface for organizing content into switchable panels with icons, badges, and disabled states. - [Tags](https://aura-ui.com/docs/components/tags.md): Simple tag input that lets users add and remove free-form tags, binding an array via wire:model. - [Text](https://aura-ui.com/docs/components/text.md): A typography primitive for body text with configurable size, color, weight, and HTML tag. - [Textarea](https://aura-ui.com/docs/components/textarea.md): A multi-line text input component with label, hint, error states, character counting, and auto-resize support. - [Time Picker](https://aura-ui.com/docs/components/time-picker.md): Time selection input with step increments, min/max constraints, and a searchable dropdown of time slots. - [Timeline](https://aura-ui.com/docs/components/timeline.md): A vertical timeline component for displaying chronological events with icons, colors, and dates. - [Toasts](https://aura-ui.com/docs/components/toasts.md): Notification toast system for displaying temporary feedback messages with multiple types and positions. - [Toggle](https://aura-ui.com/docs/components/toggle.md): A switch-style toggle input component for boolean on/off states, with label, description, size, and color variants. - [Tooltip](https://aura-ui.com/docs/components/tooltip.md): A lightweight popup component that displays additional information when hovering or focusing on an element. ## Pro Components - [App Shell](https://aura-ui.com/docs/components/app-shell.md): A complete application layout shell with a sticky, full-height sidebar and a scrollable, centered content area. Handles responsive off-canvas navigation on mobile. (Pro) - [Area Chart](https://aura-ui.com/docs/components/area-chart.md): Zero-config themed area chart preset powered by Chart.js, with automatic Aura palette colors, legend, and grid lines. (Pro) - [Bar Chart](https://aura-ui.com/docs/components/bar-chart.md): Zero-config themed bar chart preset powered by Chart.js, supporting vertical, horizontal, and stacked layouts with Aura palette colors. (Pro) - [Carousel](https://aura-ui.com/docs/components/carousel.md): Image and content slider with autoplay, navigation arrows, and indicators. (Pro) - [Chat Bubble](https://aura-ui.com/docs/components/chat-bubble.md): Chat message bubble for building conversation interfaces with avatars and delivery status. (Pro) - [Color Picker](https://aura-ui.com/docs/components/color-picker.md): Interactive color selection input with hex, RGB, and HSL format support and optional preset swatches. (Pro) - [Composer](https://aura-ui.com/docs/components/composer.md): An auto-resizing message input with submit-on-Enter behavior, designed for chat and messaging interfaces. Pro component. (Pro) - [Confirmation Dialog](https://aura-ui.com/docs/components/confirmation-dialog.md): Modal dialog for confirming destructive or important actions before execution, with configurable variants. (Pro) - [Date Range Picker](https://aura-ui.com/docs/components/date-range-picker.md): Single-calendar date range selection with in-range highlighting, quick presets, locale support, and Livewire binding to a from/to object. (Pro) - [Dock](https://aura-ui.com/docs/components/dock.md): macOS-style dock with magnification effect for navigation and quick actions. (Pro) - [Gauge](https://aura-ui.com/docs/components/gauge.md): SVG arc gauge for displaying a value within an arbitrary numeric range, with optional threshold-based color transitions. (Pro) - [Hover Card](https://aura-ui.com/docs/components/hover-card.md): Rich tooltip that displays detailed content when hovering over a trigger element. (Pro) - [Kanban](https://aura-ui.com/docs/components/kanban.md): Drag-and-drop Kanban board with customizable columns and cards for project and task management. (Pro) - [Mail Message](https://aura-ui.com/docs/components/mail-message.md): An email-aware conversation UI built on the chat primitives — sender, recipient, subject, timestamp, collapsible bodies and attachment chips. (Pro) - [OTP Input](https://aura-ui.com/docs/components/otp-input.md): One-time password input with auto-focus, paste support, and configurable length for verification codes. (Pro) - [Pillbox](https://aura-ui.com/docs/components/pillbox.md): A multi-select input that displays selected items as removable pills with searchable dropdown. Pro component. (Pro) - [Resizable](https://aura-ui.com/docs/components/resizable.md): Drag-resizable split panels for building adjustable layouts. (Pro) - [Rich Text Editor](https://aura-ui.com/docs/components/rich-text.md): WYSIWYG rich text editor with configurable toolbar, HTML and Markdown output modes, and Livewire wire:model support. (Pro) - [Scheduler](https://aura-ui.com/docs/components/scheduler.md): Interactive time-grid scheduler with drag-to-move, drag-to-resize, click-to-create, week, day, and month views, and dispatched events for Livewire integration. (Pro) - [Sidebar](https://aura-ui.com/docs/components/sidebar.md): Application sidebar navigation with brand area, collapsible sections, active states, badges, and responsive behavior. (Pro) - [Sparkline](https://aura-ui.com/docs/components/sparkline.md): Compact inline SVG trend line or bar chart for embedding key metric trends inside stat cards, tables, and dashboards. (Pro) - [Stat Chart](https://aura-ui.com/docs/components/stat-chart.md): KPI metric card combining a label, value, change badge, optional icon, and an embedded Sparkline trend visualization. (Pro) - [Steps](https://aura-ui.com/docs/components/steps.md): Step indicator for multi-step workflows, showing progress through sequential stages with status and icons. (Pro) - [Tags Input](https://aura-ui.com/docs/components/tags-input.md): Interactive tag entry field with autocomplete suggestions, custom tag creation, and configurable limits. (Pro) - [Tree View](https://aura-ui.com/docs/components/tree.md): Hierarchical tree view with expandable nodes, icons, and optional selection for displaying nested data structures. (Pro) ## Livewire Integration - [DataTable Trait](https://aura-ui.com/docs/livewire/data-table.md): Livewire trait providing sortable columns, search, pagination, and column visibility for data tables. (Pro) - [Row Grouping](https://aura-ui.com/docs/livewire/data-table-grouping.md): Group DataTable rows under headers by a column value using the WithAuraDataTable trait — with inline editing kept safe by the column allow-list. (Pro) - [DataTable Export](https://aura-ui.com/docs/livewire/export.md): Stream the current searched, filtered and sorted DataTable result set as a CSV download, honouring visible columns and column formatting. (Pro) - [Row Details](https://aura-ui.com/docs/livewire/row-details.md): Expandable detail rows for an Aura DataTable, with multi-open or accordion behaviour, via the WithAuraRowDetails trait. (Pro) - [Filters Trait](https://aura-ui.com/docs/livewire/filters.md): Livewire trait providing a filter sidebar with active filter badges, reset functionality, and multiple filter types. (Pro) - [Bulk Actions Trait](https://aura-ui.com/docs/livewire/bulk-actions.md): Livewire trait providing row selection, select all, and bulk action dropdown for data tables. (Pro) - [Inline Edit Trait](https://aura-ui.com/docs/livewire/inline-edit.md): Add click-to-edit functionality to DataTable cells in your Livewire components. (Pro) - [Form Trait](https://aura-ui.com/docs/livewire/form-trait.md): Livewire trait providing form validation, dirty state tracking, and confirmation before leaving unsaved changes. (Pro) ## Filament Theme - [Overview](https://aura-ui.com/docs/filament.md): Transform your Filament admin panel with 4 design presets, icon packs, and 40+ CSS custom properties. (Pro) - [Install Command](https://aura-ui.com/docs/filament/install-command.md): Install and configure Aura Filament in seconds with `php artisan aura-filament:install`. (Pro) - [Presets](https://aura-ui.com/docs/filament/presets.md): Explore the 4 design presets included with Aura Filament — Glass, Corporate, Warm, and Midnight. (Pro) - [Layout Modes](https://aura-ui.com/docs/filament/layout.md): Switch between Filament's topbar-first layout and a Notion/Linear-style sidebar-first layout with one line of PHP. (Pro) - [Theme Configurator](https://aura-ui.com/docs/filament/theme-configurator.md): Let end-users customize their Filament panel preset, primary color, and dark mode with a built-in in-panel configurator. (Pro) - [Palette Generator](https://aura-ui.com/docs/filament/palette-generator.md): Turn any hex color into a full 11-shade OKLCH palette ready for Filament's Color::* arrays. (Pro) - [Email Theming](https://aura-ui.com/docs/filament/email-theming.md): Brand your application's notification emails with the Aura "Vibrant Depth" look via a publishable Laravel markdown mail theme. (Pro) - [Components](https://aura-ui.com/docs/filament/components.md): Ready-to-use Blade components from Aura Filament. (Pro) - [Table Columns](https://aura-ui.com/docs/filament/table-columns.md): Aura Filament table columns — rating, progress, color, sparkline, badge, and trend — for Filament v3 resource tables. (Pro) - [Scaffold](https://aura-ui.com/docs/filament/scaffold.md): Generate ready-made, Aura-styled Filament pages into your app with a single command. (Pro) - [Widgets](https://aura-ui.com/docs/filament/widgets.md): Aura chart widget family (line, bar, pie, doughnut) plus activity feed — drop-in Filament widgets with Aura styling out of the box. (Pro) - [Color Picker](https://aura-ui.com/docs/filament/color-picker.md): AuraColorPicker — Filament's color picker with a live 11-shade OKLCH palette strip powered by PaletteGenerator. (Pro) - [File Upload](https://aura-ui.com/docs/filament/file-upload.md): AuraFileUpload — Filament's file upload wrapped in an Aura glass drop zone with primary-tinted hover, drag-over glow, and a circular avatar variant. (Pro) - [Rich Editor](https://aura-ui.com/docs/filament/rich-editor.md): AuraRichEditor — Filament's rich editor with a Notion-style sticky glass toolbar, primary-tinted hover and active states, and a clean editing surface. (Pro) - [Code Editor](https://aura-ui.com/docs/filament/code-editor.md): AuraCodeEditor — a dark glass textarea tailored for code: monospace, primary focus ring, language badge, and tab-to-spaces driven by Alpine. (Pro) - [Empty States](https://aura-ui.com/docs/filament/empty-states.md): Eight illustrated SVG empty states that re-tint with your theme. Drop-in Blade component with sensible defaults and an actions slot. (Pro) - [Welcome Widget](https://aura-ui.com/docs/filament/welcome-widget.md): AuraWelcomeWidget — an onboarding checklist dashboard widget with an SVG progress ring. Completion is derived from live data, not a separate DB column. (Pro) - [Guided Tour](https://aura-ui.com/docs/filament/tour.md): Zero-dependency Alpine tour overlay with a spotlight backdrop, auto-flipping tooltip placement, and localStorage persistence. (Pro) - [Wizard Page](https://aura-ui.com/docs/filament/wizard-page.md): AuraWizardPage — multi-step setup scaffold for Filament pages. URL-synced step, shared $data array, per-step validation closures, and a glowing progress indicator. (Pro) - [Dashboard Customizer](https://aura-ui.com/docs/filament/dashboard-customizer.md): Let every user drag-reorder, hide, and resize their dashboard widgets. Layout persists in a JSON column — no extra infrastructure. (Pro) - [Command Palette](https://aura-ui.com/docs/filament/command-palette.md): Press Cmd+K or Ctrl+K to jump anywhere in your panel. (Pro) - [Auth Pages](https://aura-ui.com/docs/filament/auth-pages.md): Login, register, and password reset pages styled by Aura Filament. (Pro) - [Notifications](https://aura-ui.com/docs/filament/notifications.md): Filament notifications with Aura styling — slide-in, colored accent bar, shine effect. (Pro) - [Shield Integration](https://aura-ui.com/docs/filament/shield.md): Aura styling for bezhanSalleh/filament-shield roles and permissions. (Pro) - [Examples](https://aura-ui.com/docs/filament/examples.md): Advanced code examples for Aura Filament — custom CSS, multi-panel setups, dynamic presets, icon packs, and more. (Pro) - [Compatibility](https://aura-ui.com/docs/filament/compatibility.md): Version compatibility, known issues, and migration guide for Aura Filament with Filament v4 and v5. (Pro) ## Plugin Integrations - [FullCalendar](https://aura-ui.com/docs/filament/fullcalendar.md): Aura Vibrant Depth styling for saade/filament-fullcalendar (Pro) - [Calendar Widget](https://aura-ui.com/docs/filament/calendar-widget.md): Native monthly calendar widget for Filament dashboards (Pro) - [Kanban Widget](https://aura-ui.com/docs/filament/kanban-widget.md): Drag-and-drop kanban board widget for Filament dashboards (Pro) - [Impersonate Banner](https://aura-ui.com/docs/filament/impersonate.md): Visual indicator when an admin is impersonating a user (Pro) - [Activity Log](https://aura-ui.com/docs/filament/activity-log.md): Spatie Activity Log adapter for the Aura Activity Feed widget (Pro) ## Resource Components - [Resource Hero Section](https://aura-ui.com/docs/filament/resource-hero.md): Enhanced header styling for Filament Resource pages (Pro) - [Table Actions Drawer](https://aura-ui.com/docs/filament/table-actions-drawer.md): Opt-in slide-out drawer for table row actions (Pro) - [Bulk Actions Toolbar](https://aura-ui.com/docs/filament/bulk-actions.md): Enhanced selection indicator for table bulk actions (Pro) - [Infolist Tabs](https://aura-ui.com/docs/filament/infolist-tabs.md): Animated tab transitions with gradient indicator (Pro) ## Tools - [Playground](https://aura-ui.com/docs/playground.md): Playground component documentation.