Components

Accessible, customizable components built for Auth0. Install via CLI or copy the source directly.

Accordion

Vertically stacked collapsible sections that expand one at a time.

Alert

Displays an inline message for important information or warnings.

Alert Dialog

A modal that requires confirmation before proceeding with a destructive action.

Avatar

An image element with a fallback for representing a user.

Badge

A compact label for status, counts, or categories.

Button

Triggers an action or event.

Card

A container that groups related content and actions.

Checkbox

Selects one or more options from a set.

Chip

A compact element representing an input, attribute, or action.

Color Picker

Lets users select colors with various format outputs.

Combobox

A text input combined with a listbox for filtering and selecting options.

Dialog

A modal window that opens on top of the page.

Dropdown Menu

A menu of actions triggered by a button.

File Upload

Lets users select and upload files via browse or drag-and-drop.

Form

Validated form fields with error messaging and submission handling.

Floating Label Field

A text input with a label that floats above the field on focus.

Image Preview Field

A URL input that renders a live image preview alongside it.

Inline Code

Styled inline text for code snippets within prose.

Label

An accessible text label for form controls.

Link

A styled anchor for navigating between pages.

List

Renders ordered or unordered lists of items.

Markdown

Renders Markdown content as styled HTML.

OTP Field

A segmented input for entering one-time passcodes.

Pagination

Navigates between pages of content.

Popover

Floating content anchored to a trigger element.

Progress

A bar that indicates completion progress of a task.

QR Code

Generates a QR code from a value with customizable size and options.

Radio Group

Selects a single option from a set of choices.

Select

Picks one option from a dropdown list.

Separator

A visual divider between content sections.

Spinner

An animated indicator for loading states.

Sheet

A panel that slides in from the edge of the screen.

State Indicator

A visual marker showing the current state of an item.

Stepper

Displays progress through a sequence of numbered steps.

Switch

Toggles a setting between on and off.

Table

Displays structured data in rows and columns.

Tabs

Organizes content into selectable tabbed panels.

Textarea

A multi-line text input for longer content.

Text Field

A single-line text input for collecting user input.

Toggle

A button that switches between pressed and unpressed states.

Tooltip

A text label that appears on hover or focus.