Componentes

Allows you to display content in a collapsible manner, making it easy for users to access information while conserving screen space.

Alerts often appear between inputs or around the important UI elements to convey critical information, such as an incorrect password during login attempts.

AlignUI Avatar Empty Icons, a helper shipped with the official docs.

More compact version of AvatarGroup.

Avatar group displays two or more avatars in an inline stack.

Avatar is an image that represents a user or organization.

A badge is a piece of text that is visually stylized to differentiate it as contextual metadata. It can be used to add a status, category, or other metadata to a design.

Delivering crucial alerts and information prominently at the top of the screen.

Guiding users by displaying their path within an app or website.

Button groups are a set of buttons sticked together in a horizontal line.

Renders a button or an element styled to resemble a button.

Checkbox is a form control for single and multiple selections.

Choose or create specific colors with this versatile tool for various design needs.

Command Menu empowers users to swiftly execute searches on any page, thereby streamlining their workflow.

Buttons that are ideal for when space is limited.

Enabling users to choose either a single date or a range of dates.

A component for entering one-time passwords (OTPs) in a digit-by-digit manner. Ideal for secure authentication flows where users need to input short numeric codes.

A versatile divider component used to create visual separation between content.

Very minimal stepper. Often used as carousel dots.

A panel which slides out from the edge of the screen.

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Regular buttons with a fancy appearance.

AlignUI File Format Icon, a helper shipped with the official docs.

A consistent way to drag and drop, as well as browse your computer to upload a media file.

Hint components provide contextual information or guidance beneath inputs, selects, and textareas, enhancing usability and user experience.

A versatile horizontal step indicator providing a clear visual guide through sequential processes.

Text input is used to set a value that is a single line of text.

A very simple component for displaying keyboard key styling.

Labels provide context for user inputs.

Buttons that seamlessly integrate with text content.

Modal is a floating surface used to display transient content such as confirmation actions, selection options, and more.

AlignUI Notification Provider, a helper shipped with the official docs.

Notifications typically appear temporarily in corners, conveying information like payment and update notifications.

Pagination is a horizontal set of links to navigate paginated content.

Popover is used to bring attention to specific user interface elements.

A progress bar is a simple chart that can be used to show how complete something is.

A progress circle is a simple chart that can be used to show how complete something is.

Radio button is a form control for making a single selection from a short list of options.

Segmented control is used to pick one choice from a linear set of closely related choices, and immediately apply that selection.

Select is an input for selecting a single option from a menu.

Allowing precise selection of a single value within a specified range.

AlignUI Social Button (from the official starter repository).

Allows you to visually highlight statuses or conditions within a confined screen space.

The Rating Component offers a dynamic and visually engaging way for users to express their opinions.

Switch is used to immediately toggle a setting on or off.

Provides a linear layout for making it easy to switch between sections or categories.

Provides a stacked layout for making it easy to switch between sections or categories.

Data table is a 2-dimensional data structure where each row is an item, and each column is a data point about the item.

Efficient tool for categorizing and labeling content within your application.

Renders a textarea with custom resize handle and character length display.

AlignUI Toast Alert, a helper shipped with the official docs.

Multiple notifications may stack up as Toasts, delivering brief feedback in a compact size.

Tooltips add additional context to interactive UI elements and appear on mouse hover or keyboard focus.

An adaptable vertical step indicator offering an intuitive progression representation for diverse layouts.