Accordion is used for showing and hiding content but only one item can stay open at a time.
Alert informs users about important events.
Artboard provides fixed size container to display a demo content on mobile size.
Avatars are used to show a thumbnail representation of an individual or business in the interface.
Badges are used to inform the user of the status of specific data.
Bottom navigation bar allows navigation between primary screens.
Breadcrumbs helps users to navigate through the website.
Buttons allow the user to take actions or make choices.
Cards are used to group and display content in a way that is easily readable.
Carousel show images or content in a scrollable area.
Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.
Checkboxes are used to select or deselect a value.
Collapse is used for showing and hiding content.
Countdown gives you a transition effect of changing numbers.
Diff component shows a side-by-side comparison of two items.
Divider will be used to separate content vertically or horizontally.
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
Dropdown can open a menu or any other element when the button is clicked.
File Input is a an input field for uploading files.
Footer can contain logo, copyright notice, and links to other pages.
Hero is a component for displaying a large box or image with a title and description.
Indicators are used to place an element on the corner of another element.
Text Input is a simple input field.
Join is a container for grouping multiple items, it can be used to group buttons, inputs, or any other element. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.
Kbd is used to display keyboard shortcuts.
Link adds the missing underline style to links.
Loading shows an animation to indicate that something is loading.
Mask crops the content of the element to common shapes.
Menu is used to display a list of links vertically or horizontally.
Browser mockup shows a box that looks like a browser window.
Code mockup is used to show a block of code in a box that looks like a code editor.
Phone mockup shows a mockup of an iPhone.
Window mockup shows a box that looks like an operating system window.
Modal is used to show a dialog or a box when you click a button.
Navbar is used to show a navigation bar on the top of the page.
Pagination is a group of buttons that allow the user to navigate between a set of related content.
Progress bar can be used to show the progress of a task or to show the passing of time.
Radial progress can be used to show the progress of a task or to show the passing of time.
Radio buttons allow the user to select one option from a set.
Range slider is used to select a value by sliding a handle.
Rating is a set of radio buttons that allow the user to rate something.
Select is used to pick a value from a list of options.
Skeleton is a component that can be used to show a loading state of a component.
Stack visually puts elements on top of each other.
Stat is used to show numbers and data in a box.
Steps can be used to show a list of steps in a process.
Swap allows you to toggle the visibility of two elements using a checkbox or a class name.
Tabs can be used to show a list of links in a tabbed format.
Table can be used to show a list of data in a table format.
Textarea allows users to enter text in multiple lines.
If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.
Timeline component shows a list of events in chronological order.
Toast is a wrapper to stack elements, positioned on the corner of page.
Toggle is a checkbox that is styled to look like a switch button.
Tooltip can be used to show a message when hovering over an element.