Explore components

An about modal displays information about an application, like product version numbers and any appropriate legal text.

An accordion is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content.

An action list is a group of actions, controls, or buttons with built-in spacing.

An alert is a non-intrusive notification that shares brief, important messages with users.

An application launcher is a menu that provides quick access to a set of related applications or tools.

An avatar is a visual representation of a user, which can contain an image or placeholder graphic.

The back to top component is a shortcut that allows users to quickly navigate to the top of a page via a button.

A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed.

A background image is an image that fills the background of a page.

A badge is an annotation that displays a numeric value.

A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed.

A brand is a visual representation of a product—typically its logo.

A breadcrumb is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently.

A button is an object that communicates and triggers an action when it is clicked or selected.

A calendar month displays a single month and allows users to select a date.

A card is a content container that displays entry-level information—typically within dashboards, galleries, and catalogs.

A catalog item header displays the title, icon, and metadata at the top of a catalog item detail view.

A catalog tile is a selectable card that presents a single item within a catalog view.

A chart visualizes data sets as bar, line, area, pie, and other graph types.

A checkbox is used to select one or more items from a list, or to turn an option on or off.

A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

Click to load appends the next set of results to a list when a user selects a load-more button.

The clipboard copy component allows users to quickly and easily copy content to their clipboard.

A code block contains 2 or more lines of read-only code, which can be copied to a user's clipboard.

A code editor is a versatile Monaco-based text editor that supports various programming languages.

A content component contains a block of styled HTML content.

A context selector allows users to switch between distinct contexts, such as projects or environments.

Custom menus compose the menu building blocks into bespoke dropdown, select, and action patterns.

A data list displays large data sets and interactive content in a flexible layout.

The data view is a composable pattern for presenting data sets with a toolbar, table or card layout, and pagination.

A data view toolbar provides search, filtering, and view controls for a data view.

A data view table renders a data set as a sortable, selectable table within a data view.

A date and time picker combines a date picker and a time picker to select a full date and time value.

A date picker is a text input with a calendar dropdown that allows users to select a date.

A description list displays terms and their corresponding descriptions.

A divider is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings.

A document editor embeds a Collabora Online editor for viewing and editing documents, spreadsheets, and presentations.

The drag and drop component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts.

A drawer is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content.

A dropdown presents a menu of actions or links in a constrained space by toggling their visibility.

A dual list selector displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists.

An empty state is a screen that is not yet populated with data or information—typically containing a short message and next steps for users.

An expandable section is a content section with a text toggle that reveals content that is hidden by default.

A filter side panel presents grouped, selectable filters alongside a catalog or data view.

A form is a group of related fields, inputs, and controls that users complete and submit.

A form control provides the base styling for text inputs, selects, and other form fields.

A form select is a styled native select element for choosing a single option from a list.

Helper text is a text-based support method that adds additional context to field inputs.

A hint is an in-app message that shares reminders, explanations, or calls to action within a page.

An icon component is a container that supports icons of varying dimensions and styles, as well as spinners.

Infinite scroll loads additional results automatically as the user scrolls toward the end of a list.

An inline edit component allows users to switch between read-only and edit views of description lists, page text elements, or tables—within the context of their current view.

An input group combines multiple related controls or inputs to appear as a single control.

When clicked, jump links allow users to navigate to sections within a page without scrolling.

A label is a descriptive annotation that adds context to an element for clarity and convenience.

A lazy modal fetches its contents from the server the first time it is opened.

A list component embeds a formatted list—bulleted or numbered—into page content.

Form validation gives users immediate, server-driven feedback about the values they enter into a form.

A sortable table reorders its rows when a user selects a column header, with sorting handled on the server.

Click to edit swaps a read-only value for an editable field in place when the user selects it.

Toast confirm pairs a confirmation dialog with a toast notification to acknowledge a completed action.

Skeleton loading shows placeholder shapes while content is fetched, then swaps in the real content.

Live search updates a list of results as the user types, querying the server on each change.

A log viewer displays streaming or static log output with search and line controls.

A login page allows a user to access an application by entering a username and password, or by authenticating using a social media login.

A map is an interactive, pannable map built on MapLibre for plotting markers and overlays.

A masthead contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application.

A menu is a list of options or actions that users can choose from.

A menu toggle is the button that opens and closes a menu, dropdown, or select.

A modal is a window that overlays a page to display important information, without requiring users to navigate to a new page.

A multiple file upload allows users to add several files at once by dragging them onto a drop zone or browsing.

A navigation component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks.

A notification badge is a visual indicator that alerts users about incoming notifications.

A notification drawer contains an application's notifications, which users can view and manage without having to navigate to a new screen.

A number input combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value.

An options menu presents a set of selectable options, such as sort or display settings, in a dropdown.

An overflow menu groups a set of actions into a responsive horizontal list to help declutter the UI.

A page component defines the basic layout of a page, with either vertical or horizontal navigation.

A pagination component allows users to navigate through large content views that have been split across multiple pages.

A panel is a customizable container that can contain other components in flexible content layouts.

This demo demonstrates how to create an input field that generates unique passwords.

This demo demonstrates how to validate and display feedback about password strength.

A popover is a small overlay window that provides additional information about an on-screen element.

A progress component is a horizontal bar that indicates the completion status of an ongoing process or task.

A progress stepper displays a timeline of tasks in a workflow and tracks a user's progress through the workflow.

A properties side panel lists an item's attributes as a set of property-value pairs beside the main content.

A radio button is used to select a single option from a set of mutually exclusive choices.

Rectangle selection lets users select multiple items by dragging a selection rectangle over them.

A rich text editor is a Quill-based editor for composing formatted text content.

Ripple is a lightweight, pure-CSS loading indicator built from animated expanding rings.

The i18n demo shows how server-rendered components pick up translated messages from a message bundle.

A search input is a type of input field that can be used to search, find, or filter.

A select presents a menu of options within a form, allowing users to choose one or more values.

A sidebar is a panel that splits content into a secondary area within a page.

A simple file upload provides a single-file input with a filename display and browse and clear controls.

A simple list displays selectable items within a page.

A skeleton is a type of loading state that allows you to expose content incrementally.

A skip to content component allows users to bypass navigation when using a screen reader or keyboard.

A slider is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values.

A spinner is an animated visual that indicates when a quick action is in progress.

A switch is a control that toggles the state of a setting between on and off.

A table displays large data sets in a simple grid with column headers.

Tabs group similar content within sub-views of a page.

A text area is a multi-line text input for longer, free-form content.

A text input is a single-line field for entering and editing short text values.

A text input group is a more custom, flexible, and composable version of a text input that includes elements like icons and buttons.

A tile is a container that allows users to select a static option.

A hero is a prominent, page-level banner used to introduce a landing or overview page.

Compass is a full-viewport layout for generative and conversational UIs, with a header, optional sidebars, main content, and a footer area that often uses a ChatBot message bar.

A time picker is a text input with a dropdown that allows users to select a time of day.

A timestamp is a consistently formatted visual that displays date and time values.

A title component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings.

A toggle group is a set of controls that can be used to quickly switch between actions or states.

A toolbar is a responsive container that displays controls that allow users to manage and manipulate a data set.

A tooltip is a small, temporary, overlay window that provides additional information about an on-screen element.

A topology visualizes nodes and their relationships as an interactive graph.

A tree view is a structure that displays data in a hierarchical view.

A truncate component can be used to shorten character strings—typically when the string overflows its container.

A user feedback modal collects ratings and comments from users about their experience.

Vertical tabs group related content into panels selected from a vertical list of tabs.

A video player embeds and controls video playback with a Video.js-based player.

A wizard is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps.