Components

An accordion is a group of vertically stacked, collapsible sections that allow users to toggle the visibility of related content.

Article provides styles to common element selectors to create an article in a content page.

A breadcrumb is a secondary navigation pattern that shows users their current location within a website or application's hierarchy.

Buttons make actions apparent to users and can navigate to different pages or perform actions. They can display text, icons, or both.

A callout is a versatile, pre-styled container used to highlight key pieces of content in a visually distinct way.

A card is a flexible content container used to group related information and actions about a single subject.

Container is a basic structural element that restricts page content to a specific maximum width.

Form field is a wrapping component that provides consistent styling and behavior for form control elements.

A hero is a top-level container designed to be large and captivating, typically used as the first component to introduce a page's main purpose or message.

Image has built-in performance and accessibility optimizations that allow users to easily display responsive images.

Input works alongside the native HTML input element, with additional custom styling and functionality.

Link set is a component for displaying two or more link set items.

A list is a stylized container used to vertically group a series of related content.

Loading icons are used as an indicator of an event in progress.

A media gallery displays a group of thumbnails in a gallery format, allowing users to preview and select different media.

Menu is a small floating panel used to display a list of actions or navigational items.

Modal is a dynamically rendered element that floats above the rest of a page's content, requiring user interaction before returning to the main application.

Native select works alongside the HTML select element, with additional custom styling and functionality.

Navbar is a flexible and extensible, horizontally stacked component intended for major blocks of navigation links.

A notification provides contextual feedback or information related to user actions within a page's content.

Paginator is used to break up large amounts of content into multiple pages, enabling users to easily navigate between pages of content.

A progress bar provides visual feedback about the duration or progress of a task or operation.

Quantity field is a form control element that switches between a native select and input element.

Radio is used to select a single value from a selection of values.

Select allows users to choose from a dropdown panel with a list of options, similar to a native <select> element but with an enhanced UI.

A sidebar is a component used to display additional information alongside a page.

A switch allows users to toggle the state of a single setting.

Tabs provide a way to navigate between panels that display related content without leaving the page.

Tags are compact visual indicators used to display short pieces of information, such as status, categories, or labels. They typically contain an icon, text label, and optionally a delete button for removable items.

A text snippet is used to display a section of text with the ability to show or hide content beyond one line of text.

Textarea works alongside the HTML textarea element, with additional custom styling and functionality.

Toasts are notifications that provide application-level information. They are designed to mimic push notifications and appear temporarily on the screen.

Trees are used to visualize hierarchial information. They are often used to display navigational structures like nested lists of links.