A component for
every new idea.
Explore 64 families of real components. Edit their code, change their properties and find the combination you need.
Foundations11
Icon
Lucide icons with size, color and accessible labels.
Button
A clear action at the right moment.
ButtonGroup
Group related actions in a single row.
Badge
A small label for statuses, categories and updates.
Typography
Typography with a shared visual language.
Card
A container that gives content context and structure.
Avatar
Represent a person with an image or initials.
Separator
Subtly separate blocks of content.
AspectRatio
Keep stable proportions for images and visual content.
Kbd
Display readable keyboard shortcuts.
Code
Formatted code with line numbers and copying.
Forms16
Input
Text input with sizes, validation and masks.
Textarea
Free-form text with a counter and adaptive height.
Label
A field's visible label.
Field
Label, hint, control and error in one unit.
InputGroup
Add context and actions to an input.
InputOTP
A verification code split into slots.
Checkbox
An independent choice or part of a multiple selection.
Switch
Turn a preference on or off immediately.
RadioGroup
One choice among several alternatives.
Select
Selection with search, groups, asynchronous loading and option creation.
Slider
Precisely adjust a value or interval.
Calendar
Date selection in a calendar view.
DatePicker
A compact date picker with a dropdown calendar.
Toggle
A button with a pressed state.
ToggleGroup
A toolbar for single or multiple selection.
Questionnaire
Sequential questions with structured answers.
Panels and menus8
Dialog
A focused conversation over your interface.
Sheet
A side panel for tasks that need context.
Drawer
A sliding panel for supporting content.
Popover
Information or controls beside their trigger.
Tooltip
A brief explanation for a control.
HoverCard
A contextual preview on hover or focus.
Menu
A dropdown action menu or menu bar.
ContextMenu
Contextual actions on right-click.