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