All Components

All Components

Here is a complete list of all available components in the Aura Design System:

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Action Bar

A floating toolbar for bulk actions on selected items.

Alert

Displays a callout for user attention with contextual feedback messages.

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Angle Slider

A circular slider for selecting an angle or value along an arc.

App Bar

A top bar in three sizes that gains a shadow when content scrolls under it.

Aspect Ratio

Displays content within a desired ratio.

Attachment

A file row with idle, uploading, success, and error states.

Autocomplete

A input component that allows users to search and select from a list of options.

Avatar

An image element with a fallback for representing the user.

Avatar Group

Overlapping avatars with truncation, orientation, and custom overflow.

Badge

Displays a badge or a component that looks like a badge.

Badge Overflow

Measures available space and shows badges with an overflow indicator.

Banner

A full-width notice with an optional action and dismiss button.

Breadcrumb

A navigation trail for the current page.

Bubble

Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and polymorphic content.

Button

Displays a button or a component that looks like a button.

Button Group

A container that groups buttons (and optional text or separators) with shared styling and orientation.

Calendar

Displays a calendar.

Card

Displays a card with header, content, and footer sections.

Carousel

A carousel component built with Embla, with optional previous/next controls and configurable orientation.

Chart

Chart container, tooltip, legend, and series wrappers. Series colors use Aura chart tokens.

Checkbox

A control that allows the user to toggle between checked and not checked.

Chip

Standalone assist, filter, and input chips.

Circular Progress

Determinate progress drawn as a circle.

Collapsible

An interactive component which expands and collapses content.

Color Picker

A color field with a picker, a typed hex value, and swatches.

Color Swatch

A selectable color sample.

Combobox

A combobox component that allows users to search and select from a list of options.

Command

A command palette that allows users to search and execute commands.

Compare Slider

A slider that reveals one view over another.

Context Menu

Displays a menu to the user triggered by right-click or long-press.

Cropper

A draggable crop region you can also nudge with the arrow keys.

Date Picker

A single date chosen from Calendar inside a Popover.

Dialog

A window overlaid on the primary content, rendering content in a layer above the page.

Drawer

A drawer component that slides in from the edge of the screen.

Dropdown Menu

Displays a menu of actions or options triggered by a button.

Editable

Inline text that switches between preview and edit modes.

Empty

A placeholder component for empty states, with optional icon, title, description, and content slots.

Expressive Carousel

A carousel whose items resize as you scroll.

Fab

A floating button for a screen's main action, with an optional label.

Fab Menu

A floating button that opens a stack of related actions.

Field

Standalone field layout that sits beside Form.

File Upload

A composable file upload with dropzone, list, previews, and progress indicators.

Form

A comprehensive form system with schema-based validation, error handling, and field management. Built with Radix UI primitives and AJV validation, supporting text inputs, textareas, selects, checkboxes, switches, and checkbox groups with automatic error propagation and touch state management.

Fps

A live frames-per-second meter.

Gauge

A semicircle meter with a needle.

Grid

Displays a grid container with configurable column layout.

Hover Card

For sighted users to preview content available behind a link.

Icon

A wrapper for icons, including marks built with createIcon.

Input

Displays a form input field or a component that looks like an input field.

Input Group

Add addons, buttons, and helper content to inputs.

Input OTP

A one-time code built from SegmentedInput.

Item

A list row with media, title, description, and actions.

Kanban

Columns of cards that move backward and forward.

Kbd

A keyboard shortcut component that allows users to display keyboard shortcuts.

Key Value

A list of labels and values.

Label

Renders an accessible label associated with form controls.

Listbox

A list of options with arrow-key selection.

Loading Indicator

A loading status that morphs between shapes.

Marker

Displays an inline status, system note, bordered row, or labeled separator in a conversation.

Marquee

A looping row of items that pauses for reduced motion.

Mask Input

An input that formats values with built-in or custom mask patterns.

Masonry

A two-column layout that keeps items intact.

Media Player

Play, pause, seek, and mute controls for an audio source.

Mention

An accessible text input that suggests and inserts items after a trigger character.

Menubar

A visually persistent menu common in desktop applications.

Message

Displays a message in a conversation, with optional avatar, header, footer, and alignment.

Message Scroller

A chat scroll container that anchors turns, follows streamed output, loads history without jumping, and jumps to any message.

Native Select

A native select with the same field chrome as other inputs.

Navigation Bar

Bottom navigation for phones.

Navigation Menu

A collection of links for navigating websites.

Navigation Rail

Side navigation for tablet and desktop, collapsed or expanded.

Pagination

Pagination with page links, previous/next controls, and ellipsis.

Phone Input

A phone field with a calling code and a typed number.

Popover

Displays rich content in a portal triggered by a button.

Presentation

Composable PowerPoint viewer and editor built on @diceui/pptx.

Progress

Displays an indicator showing the completion progress of a task.

Qr Code

A square code for a short string, up to 17 bytes.

Questionnaire

One question at a time, built on Stepper.

Radio Group

Re-usable components built using Radix UI and Tailwind CSS.

Rating

A star rating that works with the keyboard.

Relative Time Card

A relative time with the absolute date beside it.

Resizable

Panels that resize by drag or keyboard.

Responsive Dialog

A dialog on desktop and a drawer on mobile, sharing one API.

Responsive Dropdown Menu

A dropdown menu on desktop and a stacked drawer for nested menus on mobile.

Scroll Area

Augments native scroll functionality for custom cross-browser styling.

Scroll Spy

A list of links that marks the section in view.

Scroller

A horizontal strip with back and forward controls.

Search

A search bar that expands into a results view.

Section

A semantic section container with configurable layout variants.

Segmented Input

A group of connected input fields that appear as a single segmented visual unit.

Select

A select component that allows users to select a value from a list of options.

Selection Toolbar

A floating toolbar that appears on text selection with formatting and utility actions.

Separator

A separator component that allows users to separate content.

Shape

A set of shapes that can mask an image and morph between each other.

Sheet

A slide-out panel that overlays the page, with optional header, footer, title, and description. Opens from a trigger (e.g. button).

Side Sheet

A side panel that sits beside the content, with no overlay.

Sidebar

A collapsible side panel for app navigation and layout, with optional mobile sheet, icons, and persistent state.

Signature Pad

A component that allows the user to sign a document using a pen.

Skeleton

A loading placeholder with pulse animation, typically used for content that is being fetched.

Slider

An input where the user selects a value from within a given range.

Snackbar

A short message at the bottom of the screen with one optional action.

Sortable

A sortable list of items.

Speed Dial

A floating button that opens a stack of actions. Same parts as the floating action menu.

Spinner

A status spinner reused by Button and FormSubmit.

Split Button

A main action paired with a menu of related actions.

Stack

Overlapping panels offset from one another.

Stat

Displays a statistic with label, value, optional indicator, trend, and description.

Status

A short status label with a tone dot.

Stepper

A sequential progress indicator with navigation controls.

Swap

Switches between two views in place.

Switch

A control that allows the user to toggle between on and off states.

Table

A responsive table for organizing related data into rows and columns.

Tabs

A tabs component that allows the user to switch between different views.

Tags Input

A field that collects tags. Enter adds one, Backspace removes the last.

Textarea

A multi-line text input for longer form content.

Time Picker

A clock dial paired with a typed time field.

Timeline

A vertical list of titled moments.

Toast

How to install sileo and style it with Aura tokens. Aura does not ship a Toast component.

Toggle

A toggle component that allows the user to toggle between on and off states.

Toggle Group

A group of toggle buttons where one or more options can be selected, with single or multiple selection modes.

Toolbar

An always-visible bar of related actions.

Tooltip

A tooltip component that displays informative text when hovering over an element.

Tour

A short stepped guide that highlights one target at a time.

Typography

The fluid type scale as CSS classes. Aura does not ship a Typography component.