Components
Here you can find all the components available in the library. We are working on adding more.
Accordion
Stack sections that expand one at a time, like the questions of an FAQ.
Alert
Display a callout for user attention, like a confirmation, a warning, or an error.
Avatar
Show a user's picture in profiles, comments, and menus, alone or stacked in groups.
Badge
Mark content with a small status or label, like "New", a count, or a category.
Breadcrumb
Show users where they are on your site, with links back to each page above.
Bubble
Draw the speech balloons in messaging and AI chat interfaces.
Button
Trigger actions in forms, dialogs, and toolbars.
Button Group
Attach related buttons into one row, like a split button or a search input with its action.
Card
Group related content on one surface, like a login form or a stat.
Carousel
Use it for image galleries, product showcases, testimonials, or hero sections.
Checkbox
Toggle options on and off, like accepting terms or selecting rows.
Collapsible
Expand and collapse content with a trigger, like details behind a "show more".
Combobox
Use it as a searchable select for form fields with many options, like countries, timezones, or tags.
Command
Use it for a searchable menu of actions, opened inline or as a command dialog.
Dialog
Open a modal window for confirmations, short forms, and alerts.
Drawer
Use it for actions and details that slide in from the screen edge, with drag to dismiss like a native mobile sheet.
Dropdown
Show a menu of actions behind a button, like a user menu or row actions.
Empty
Fill a blank area with an icon, a message, and an action.
Field
Wrap a form control with its label, description, and error message.
Forms
Use them to build complete forms from fields, inputs, selects, and more.
Input
Capture single-line text like names, emails, and search queries.
Input Group
Put icons, text, and buttons inside one bordered field.
Item
Lay out rows of media, title, description, and actions in lists, menus, and settings.
Kbd
Show keyboard keys and shortcuts, like the hints next to menu items.
Label
Name form controls like inputs, checkboxes, and selects.
Marker
Use it for status lines, date dividers, and activity notes in chat interfaces.
Message
Build messaging conversations and AI chat interfaces.
Message Scroller
Build chat feeds that follow new messages and keep the reader's place.
Pagination
Move between pages of content, with previous and next links.
Popover
Open a small panel next to a button for settings, filters, and quick forms.
Progress
Show how far along a task is, like an upload or a playback position.
Radio Group
Pick exactly one option from a set, like a plan or a shipping method.
Scroll Fade
Fade scrollable content at its edges, so users can see there is more to scroll.
Scrollbar
Restyle native scrollbars with a slim, themeable thumb.
Select
Pick one option from a native dropdown, like a category, status, or timezone.
Separator
Divide content, horizontally between sections or vertically between inline items.
Sheet
Slide out a panel for edit forms, filters, and mobile navigation.
Shimmer
Sweep a highlight across loading and thinking indicators.
Sidebar
Put app navigation beside the page, collapsing to an icon rail or a mobile drawer.
Skeleton
Show a placeholder while content is loading.
Slider
Pick a value from a range, like volume or a price cap.
Switch
Turn a setting on or off, like notifications or airplane mode.
Table
Present tabular data, like invoices, users, or transactions.
Tabs
Show one section at a time behind a row of tabs, like the pages of a settings screen.
Textarea
Capture multi-line text like messages, comments, and feedback.
Toast
Show brief notifications, like "Changes saved" or "Copied to clipboard".
Tooltip
Show a short text hint on hover, like explaining an icon-only button.