Components Blocks Showcase Filament Why Aura Pricing Docs Blog About

Login

Components

Every Aura UI component

179 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 (127)

Collapsible content panels for organizing information into expandable sections.

The bar that appears when rows are selected — and announces itself.

One entry in an activity feed, with a date a machine can read.

Contextual feedback messages for user actions and system events.

Announcement Banner

The strip above the header — a release, a sale, a maintenance window — dismissible without being intrusive.

Complementary side region for filters, secondary navigation or contextual panels.

Reserves the right height before the content arrives, so the page does not jump.

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.

One tile of a bento grid, optionally spanning more than one column or row.

The asymmetric grid behind a feature section — cells claim extra columns or rows and the layout stays even.

A quotation with its attribution, marked up as a figure.

The navigation bar phones put within thumb reach.

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.

Buttons that belong together, joined into one control and announced as one.

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

An admonition inside prose — a note, a tip, a warning that belongs to the document rather than to the moment.

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

Centres its content on one or both axes.

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.

Clipboard Button

Copies a value and says out loud that it did.

Inline code inside running text.

A whole snippet with its language, its filename and a copy button that says out loud when it has copied.

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

A field you can type into that also has a list to choose from, with the ARIA pattern in full.

Command Palette

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

Centred, width-constrained page wrapper that keeps line length readable on wide screens.

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.

An amount of money, typed the way the reader writes numbers and posted the way a computer reads them.

A single metric with its change, an optional icon and a sparkline.

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.

Text field whose label starts inside the box and rises when the field is filled or focused.

The page footer as a real landmark, with named link columns.

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

Responsive column grid that collapses on small screens.

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

Semantic heading component with automatic sizing based on heading level.

Marks every occurrence of a search term inside a piece of text, safely.

A bank account number, grouped as a bank prints it and checked before it can leave.

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

A responsive image that makes you decide what its alt text is.

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.

The field label styling on its own, for controls you build yourself.

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

A themed anchor that handles external links honestly.

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

The row of customer logos under a hero, with names a screen reader can actually read.

The page's primary content region, rendered as a semantic <main> landmark.

Highlights a fragment of text — search hits, diffs, anything worth the eye's attention.

The File / Edit / View bar of a desktop application, with the keyboard behaviour that makes it one.

A browser or phone frame around a screenshot, with the frame kept out of the way.

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.

Navigation Menu

Site navigation with drop-down panels, built as disclosures rather than a menubar.

Notification Center

Bell trigger with an unread count and a scrollable panel of notifications.

A numeric field with stepper buttons, bounds, and no accidental changes from the scroll wheel.

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 password field with a reveal toggle that reports its own state.

A telephone number and its country code, both real form controls, posted as one.

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

A price the eye can scan and a screen reader can read as one sentence.

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.

Typographic defaults for long-form content whose markup you do not control.

A QR code drawn on the server, with something to read when you cannot scan it.

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.

Groups related radios in a fieldset so the question itself is announced, not just the options.

Two handles on one track, for picking a range instead of a single value.

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

Content that eases in as it scrolls into view — without hiding from assistive technology.

Horizontal flow with consistent spacing, alignment and wrapping.

A scrollable region a keyboard can actually reach.

A button that appears once you have scrolled, and takes the keyboard with it.

A semantic page section with vertical rhythm and an optional accessible name.

Segmented Control

A small set of mutually exclusive choices, built out of real radios.

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 signature, with a way to sign that does not need a hand on a mouse.

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

The first thing a keyboard user reaches — a way past the navigation, straight to the content.

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

Fixed or flexible empty space inside a row or a stack.

An animated loading indicator component with size and color variants.

Vertical flow with consistent spacing between children.

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

A grid of service states, said in words as well as colour.

Progress through a multi-step flow, showing what is done, what is current and what remains.

A panel that stays put while the page scrolls past it.

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.

One person — photo, name, role, and links named after them.

The people behind the product, announced as a list so its size is known before it is read.

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.

Theme Controller

Light, dark, or whatever the operating system says — with system as a real third state.

A figure that counts up when it scrolls into view, and is correct before it does.

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 button that stays down, and says so.

A group of controls that behaves as one tab stop, with the arrow keys moving inside it.

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

Usage against a quota, with the state written as well as coloured.

Visually Hidden

Text that only a screen reader receives — still in the accessibility tree, never on screen.

Pro components (52)

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.

Assistant Message Pro

One turn from an assistant, quiet while it streams and announced once when it lands.

A file on a message, with its size in the name rather than in small print.

Attachment Group Pro

The list of files on a message.

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.

Chart Mixed Pro

Bars and a line on the same axes, with the finding written out.

Chat Bubble Pro

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

Chat Marker Pro

The line that says new messages start here.

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.

Date Separator Pro

The rule between two days of messages, announced as a change of day.

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

Filter Builder Pro

Rows of field, operator and value that build a query — each one named.

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.

Image Compare Pro

Before and after, with a divider the arrow keys can move.

Image Gallery Pro

A grid of thumbnails that open into a lightbox.

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

The full-screen viewer an image opens into, and returns from.

Mail Attachment Pro

The file chip under an email, with the name people actually need to read.

Mail Message Pro

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

Mail Timeline Pro

The container for a conversation: messages stacked in the order they arrived.

An embedded map — OpenStreetMap, Google Maps, or a URL of your own — with the address written beside it.

Message Typing Pro

The three bouncing dots, said out loud once.

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.

An emoji chip with a written name and a pressed state.

Reading Bookmark Pro

Save your place in a long read, and come back to it.

Reading Meta Pro

The byline: who, when, and how long it takes.

Reading Minimap Pro

The ticks down the edge showing where you are — for the eye only.

Reading Progress Pro

The bar that fills as the article scrolls — and says nothing while it does.

Reading Shell Pro

The frame for a long read: progress, table of contents and the article.

Reading Spine Pro

The narrow column beside an article that follows the reader down.

Reading TOC Pro

The table of contents beside a long read, built from real links.

Replay Button Pro

Try that again, without the button disappearing while it works.

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.

A search overlay over everything in the application, opened with a keystroke.

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.

Text arriving a word at a time, with a caret drawn in CSS.

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

A guided walk-through that focus can enter and escape can leave.

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

A VAT number or an Italian fiscal code, checked by arithmetic as it is typed.