Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Alert
Displays a callout for user attention.
Badge
Displays a badge or a component that looks like a badge.
Button Group
Displays a group of buttons that looks like a button group.
Card
Displays a card with content.
Checkbox
A control that allows the user to toggle between checked and not checked.
Confirm Alert
A modal dialog that interrupts the user with important content and expects a response.
Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
Divider
Visually or semantically separates content.
Infinite Scroll
A component to load more data when user scroll on the screen.
Input
Displays a form input field or a component that looks like an input field.
Input Hook Form
Displays a form input field or a component that looks like an input field uses react-hook-form.
Link
A link to show with all of customizations.
Linkify
A component to elevate links, phone numbers and fax.
Loading
Displays a loading icon with nice animation.
Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Popover
Displays rich content in a portal, triggered by a button.
Progress
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Select
Displays a list of options for the user to pick from—triggered by a button.
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Skeleton
Use to show a placeholder while content is loading.
Slider
An input where the user selects a value from within a given range.
Switch
A control that allows the user to toggle between checked and not checked.
Table
Displays a responsive table with header, content, and caption.
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Textarea
Displays a form textarea or a component that looks like a textarea.
Toast
A succinct message that is displayed temporarily.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.