Components

Accordion

Vertically stacked list of items, each item can be expanded or collapsed to reveal the content associated with that item.

Alert

Message box that provides important information to the user, such as warnings, errors, or other notifications.

Badge

Small count or label that appears on another element, often used to display notifications or status information.

Breadcrumb

Navigation aid that helps users understand their location within a website's hierarchy and navigate back to previous sections.

Button

Interactive element that users can click to perform an action or navigate to another page.

Card

Flexible and extensible content container with multiple variants and options.

Checkbox

Form element that allows users to select one or more options from a set.

Chip

Small, interactive element that represents an input, attribute, or action.

Datepicker

Form element that allows users to select a date from a calendar interface.

Dialog

Modal window that prompts the user to take an action or provides important information.

Dropdown

Form-like element that allows users to select an option from a list of choices.

Form Control

🚧 **WORK IN PROGRESS:** Label positions and fieldset group options. 🚧

Input

Form element that allows users to input and edit text or data into a website page.

Join

🚧 **WORK IN PROGRESS:** A CSS utility component that allows you to join two or more elements together. This looks best when the items have borders or background colors. 🚧

Loading

Page or container loading indicators.

Pagination

Navigation aid that divides content into discrete pages, allowing users to navigate through large sets of data.

Progress

Visually represents the completion status of a task, process, or page load status.

Radio

Form element that allows users to select one option from a group of choices.

Range

A range input allows users to select a value from a specified range.

Separator

🚧 **WORK IN PROGRESS:** A visual way to separate sections of content or elements either horizontally or vertically. 🚧

Tab

Navigation aid that allows users to switch between different sections or views within the same page.

Table

Element that displays tabular data in a structured format of rows and columns.

Toggle

Form element that allows users to switch between two states, such as on and off.

Tooltip

Small pop-up element that provides additional information when users hover or focus on an element.