Components Blocks Showcase Filament Why Aura Pricing Docs Blog About

Login

Components

Every Aura UI component

89 Blade components for Laravel, Livewire 3 & 4, Alpine.js and Tailwind CSS 4 — each with live docs, copy-paste code, dark mode and accessibility.

Free components (64)

Collapsible content panels for organizing information into expandable sections.

Contextual feedback messages for user actions and system events.

Searchable input field with dropdown suggestions, supporting both static options and Livewire server-side search.

Visual representation of a user or entity with image, initials, or icon fallback.

Small status indicators and labels for categorization, counts, and states.

A brand identity component that combines a logo image and application name into a navigable link.

Navigation aid showing the current page location within a hierarchical structure.

Interactive button element with multiple variants, sizes, icons, loading state, and link mode.

Interactive calendar component with month, week, and day views, event display, color-coded categories, timed events, and locale support.

Container component for grouping related content with header, body, and footer sections.

Data visualization component powered by Chart.js, supporting line, bar, pie, doughnut, and area chart types.

Form input for boolean selections with label, description, and Livewire support.

A show/hide content component with smooth expand and collapse transitions.

Command Palette

Keyboard-driven command launcher with search, grouping, and shortcut display, activated with Ctrl+K.

A right-click context menu with viewport-aware positioning, powered by Alpine.js.

A countdown timer component that counts down to a target date or from a specified number of seconds.

Calendar-based date selection input with min/max constraints, time selector, locale support, and customizable format.

Description List

Key-value pair display for structured data like details, metadata, and summaries.

A before/after comparison component with side-by-side and stacked layout options.

A slide-out panel component that appears from any edge of the screen with overlay and smooth transitions.

Toggleable overlay menu for actions, navigation, and context menus.

Lightweight free WYSIWYG editor with a basic formatting toolbar (bold, italic, underline, strikethrough, headings, lists, links) and HTML output.

Placeholder display for when no data is available, with icon, message, and call-to-action.

A floating action button component with configurable position, size, color, and expandable action menu.

A form field wrapper that provides a label, hint text, error message, and required indicator around any input.

Drag-and-drop file upload input with preview, size validation, and Livewire integration for server-side handling.

Form container with section layout, grid support, and action alignment.

A page or section header with title, description, and an actions slot for buttons.

Semantic heading component with automatic sizing based on heading level.

Inline SVG icon system with 150+ built-in icons in multiple sizes.

A badge overlay component for displaying notification dots, counts, or status markers on any element.

Text input field with label, prefix/suffix, icons, validation errors, and Livewire support.

A keyboard key display component for showing keyboard shortcuts and key combinations.

Structural primitives for page layout — container, layout, main, and aside components.

A styled list component with support for icons, dividers, and multiple visual variants.

A dialog overlay component with backdrop, transitions, and support for named modals triggered via Alpine.js or Livewire events.

A searchable multi-value select dropdown that binds an array of selected values via wire:model.

A responsive top navigation bar with brand, menu items, actions, and mobile drawer support.

Numeric one-time password input with N individual digit boxes, auto-focus progression, and paste support.

A navigation component for paginated data, designed to work seamlessly with Laravel paginators and Livewire.

A floating content panel that appears on click or hover, supporting multiple positions and glass morphism styling.

A compact user identity component combining an avatar, name, and optional subtitle.

A horizontal progress bar component with support for colors, sizes, labels, striped patterns, and animation.

Radial Progress

A circular progress indicator with configurable value, size, color, and optional percentage label.

A radio button input component with label and description support, designed for use individually or within a radio group.

An interactive star rating component with support for readonly display, custom max values, sizes, and colors.

A styled dropdown select input with label, hint, error states, and a sub-component for options.

A visual divider to separate content sections, supporting horizontal and vertical orientations with optional labels.

A placeholder loading component that mimics content layout while data is being fetched.

Range slider input for selecting numeric values within a defined range, with optional value display, color variants, and prefix/suffix labels.

An animated loading indicator component with size and color variants.

A compact card component for displaying key metrics with optional change indicators and icons, ideal for dashboards.

Secondary descriptive text to pair with headings for additional context.

A toggle component that swaps between two visual states with optional rotation or flip animations.

A styled, composable table component for displaying tabular data with striped, hoverable, bordered, and compact variants.

Tabbed interface for organizing content into switchable panels with icons, badges, and disabled states.

Simple tag input that lets users add and remove free-form tags, binding an array via wire:model.

A typography primitive for body text with configurable size, color, weight, and HTML tag.

A multi-line text input component with label, hint, error states, character counting, and auto-resize support.

Time selection input with step increments, min/max constraints, and a searchable dropdown of time slots.

A vertical timeline component for displaying chronological events with icons, colors, and dates.

Notification toast system for displaying temporary feedback messages with multiple types and positions.

A switch-style toggle input component for boolean on/off states, with label, description, size, and color variants.

A lightweight popup component that displays additional information when hovering or focusing on an element.

Pro components (25)

A complete application layout shell with a sticky, full-height sidebar and a scrollable, centered content area. Handles responsive off-canvas navigation on mobile.

Zero-config themed area chart preset powered by Chart.js, with automatic Aura palette colors, legend, and grid lines.

Zero-config themed bar chart preset powered by Chart.js, supporting vertical, horizontal, and stacked layouts with Aura palette colors.

Image and content slider with autoplay, navigation arrows, and indicators.

Chat Bubble Pro

Chat message bubble for building conversation interfaces with avatars and delivery status.

Color Picker Pro

Interactive color selection input with hex, RGB, and HSL format support and optional preset swatches.

An auto-resizing message input with submit-on-Enter behavior, designed for chat and messaging interfaces. Pro component.

Confirmation Dialog Pro

Modal dialog for confirming destructive or important actions before execution, with configurable variants.

Date Range Picker Pro

Single-calendar date range selection with in-range highlighting, quick presets, locale support, and Livewire binding to a from/to object.

macOS-style dock with magnification effect for navigation and quick actions.

SVG arc gauge for displaying a value within an arbitrary numeric range, with optional threshold-based color transitions.

Rich tooltip that displays detailed content when hovering over a trigger element.

Drag-and-drop Kanban board with customizable columns and cards for project and task management.

Mail Message Pro

An email-aware conversation UI built on the chat primitives — sender, recipient, subject, timestamp, collapsible bodies and attachment chips.

One-time password input with auto-focus, paste support, and configurable length for verification codes.

A multi-select input that displays selected items as removable pills with searchable dropdown. Pro component.

Drag-resizable split panels for building adjustable layouts.

Rich Text Editor Pro

WYSIWYG rich text editor with configurable toolbar, HTML and Markdown output modes, and Livewire wire:model support.

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.

Application sidebar navigation with brand area, collapsible sections, active states, badges, and responsive behavior.

Compact inline SVG trend line or bar chart for embedding key metric trends inside stat cards, tables, and dashboards.

KPI metric card combining a label, value, change badge, optional icon, and an embedded Sparkline trend visualization.

Step indicator for multi-step workflows, showing progress through sequential stages with status and icons.

Interactive tag entry field with autocomplete suggestions, custom tag creation, and configurable limits.

Hierarchical tree view with expandable nodes, icons, and optional selection for displaying nested data structures.