Components

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

Article provides styles for common HTML elements to create readable, well-formatted content pages.

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 structural element that restricts content to a maximum width.

Form provides components for building accessible and well-structured forms, including error messages, hints, and labels for form-related content.

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.

A menu is a floating panel that displays 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.

Pagination organizes and divides large amounts of content on separate pages and gives the user control over how much content they want to view on each page.

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.

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 display hierarchical information in a nested, expandable format.