Browse Components

Provides a wrapper for the details component to implement an accordion-like behavior, allowing only a single section to be open at any given time.

Alerts are used to display important messages inline.

A component for displaying animated GIFs and WEBPs that play and pause on interaction.

Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. Powered by the Web Animations API.

Avatars are used to represent a person or object.

Badges are used to draw attention and display statuses or counts.

Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.

Breadcrumb Items are used inside breadcrumbs to represent different links.

Buttons represent actions that are available to the user.

Button groups can be used to group related buttons into sections.

Callouts are used to display important messages inline.

Cards can be used to group related subjects in a container.

Carousels display an arbitrary number of content slides along a horizontal or vertical axis.

A carousel item represent a slide within a carousel.

Checkboxes allow the user to toggle an option on or off.

Color pickers allow the user to select a color.

A combobox lets you select an item from a list of dynamically retrieved options. You can also type in the field to quickly filter the list.

Compare visual differences between similar content with a sliding panel.

Copies text data to the clipboard when the user clicks the trigger.

Details show a brief summary and expand to show additional content.

Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.

Dividers are used to visually separate or group elements.

Drawers slide in from a container to expose additional options and information.

Dropdowns display a list of options that can be triggered by a button or other element. They support keyboard navigation, submenus, and various customization options.

Represents an individual item within a dropdown menu, supporting standard items, checkboxes, and submenus.

Formats a number as a human readable bytes value.

Formats a date/time using the specified locale and options.

Formats a number using the specified locale and options.

Icons are symbols that can be used to represent various options within an application.

Includes give you the power to embed external HTML files into the page.

Inputs collect data from the user.

Tracks immediate child elements and fires events as they move in and out of view.

Renders markdown content in plain ol' HTML.

The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.

Number inputs allow users to enter and edit numeric values with optional stepper buttons.

Options define the selectable items within a select component.

Pages offer an easy way to scaffold entire page layouts using minimal markup.

Popovers display contextual content and interactive elements in a floating panel.

Popup is a utility that lets you declaratively anchor "popup" containers to another element.

Progress bars are used to show the status of an ongoing operation.

Progress rings are used to show the progress of a determinate operation in a circular fashion.

Generates a QR code and renders it using the Canvas API.

Radios allow the user to select a single option from a group.

Radio groups are used to group multiple radios so they function as a single form control.

Ratings give users a way to quickly view and provide feedback.

Outputs a localized time phrase relative to the current date and time.

The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.

Scrollers create an accessible container while providing visual cues that help users identify and navigate through content that scrolls.

Selects allow you to choose items from a menu of predefined options.

Skeletons are used to provide a visual representation of where content will eventually be drawn.

Ranges allow the user to select a single value within a given range using a slider.

Spinners are used to show the progress of an indeterminate operation.

Split panels display two adjacent panels, allowing the user to reposition them.

Switches allow the user to toggle an option on or off.

Tabs are used inside tab groups to represent and activate tab panels.

Tab groups organize content into a container that shows one section at a time.

Tab panels are used inside tab groups to display tabbed content.

Table Wrapper can be used to extend a simple Table with interactive functions

Tags are used as labels to organize things or to indicate a selection.

Textareas collect data from the user and allow multiple lines of text.

Tooltips display additional information based on a specific action.

Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user.

A tree item serves as a hierarchical node that lives inside a tree.

Zoomable frames render iframe content with zoom and interaction controls.