Every component, one place.
Explore 103 components, try live previews and copy React usage examples. Search or browse with the sidebar.
Actions 7
Unified press, hover and focus behaviors with subtle, lift and no-motion options.
Preview & code ToggleA smooth accessible pressed-state toggle for filters and options.
Preview & code ToggleGroupA compact segmented choice set.
Preview & code CopyButtonOne-click clipboard action with a toast.
Preview & code SplitButtonA primary action paired with accessible secondary dropdown actions.
Preview & code FavoriteButtonA smooth animated heart with fill, soft burst, and accessible pressed state.
Preview & code ReactionButtonOne shared icon reaction interaction for hearts, stars, and bookmarks.
Preview & codeSurfaces 1
Forms 33
A clean, accessible input with shared focus behavior.
Preview & code TextareaExpandable multi-line text input.
Preview & code SelectThemed searchable-feel option popup with keyboard support and native form integration.
Preview & code CheckboxNative checkbox styled to match the system.
Preview & code SwitchAccessible animated on/off control.
Preview & code FieldLabel, input and hint assembled for consistent forms.
Preview & code ComboboxSearchable selection with keyboard navigation.
Preview & code PasswordInputAccessible password visibility toggle.
Preview & code DatePickerNative date selection with consistent styling.
Preview & code SliderAdjust numeric values with a native range control.
Preview & code RadioGroupA labelled, keyboard-native group of radio options.
Preview & code FileInputSystem file picker with selected-file feedback.
Preview & code InputGroupCompose prefix and suffix elements around one input.
Preview & code FieldErrorConsistent accessible validation message.
Preview & code FormSectionSeparate a settings form into reusable groups.
Preview & code FormNative semantic form and consistent action row.
Preview & code NumberInputA bounded numeric spinner with increment and decrement actions.
Preview & code ColorPickerNative color swatch paired with hex validation and copy control.
Preview & code RatingKeyboard-operable ratings with unified Lucide stars.
Preview & code FileDropzoneDrop or select local files with type, size and count limits.
Preview & code SearchInputA controlled search field with an accessible clear action.
Preview & code TagsInputAdd and remove text tags using Enter, comma or Backspace.
Preview & code OTPInputA grouped verification code input supporting paste and autofill.
Preview & code TimeInputNative time selection with consistent Icovera styling.
Preview & code CalendarInline month calendar with date constraints and controlled ISO selection.
Preview & code MultiSelectSearchable multiple choice with removable value chips.
Preview & code DateRangePickerChoose a start and end date with an inline calendar and inputs.
Preview & code RichTextEditorContentEditable rich writing with bold, italic, underline, lists and links.
Preview & code FormWizardMulti-step form flow with validation and animated progress.
Preview & code FilterBuilderBuild AND/OR filter criteria with field, operator, and value controls.
Preview & code TreeSelectSelect multiple nested categories and search a hierarchy.
Preview & code ChoiceCardsRadio-style selection cards for product plans, layouts and templates.
Preview & code InlineEditRename an item inline; Enter saves, Escape cancels.
Preview & codeDisplay 8
Compact semantic labels for state and metadata.
Preview & code AvatarProfile initials or an image with consistent sizes.
Preview & code SeparatorSubtle dividing line between related content.
Preview & code ProgressAccessible progress status for measurable tasks.
Preview & code IconA consistent lightweight icon component.
Preview & code KeyboardShortcutDocument keyboard shortcuts with consistent keycaps.
Preview & code CodeSnippetCode with a copy action built in.
Preview & code AvatarGroupStack member avatars and summarize overflow.
Preview & codeFeedback 9
Loading placeholders with reduced-motion awareness.
Preview & code SpinnerA lightweight loading indicator.
Preview & code AlertSuccess, info and warning messaging.
Preview & code EmptyStateHelpful empty content with optional action.
Preview & code ToastNonblocking notifications from the shared provider.
Preview & code StatusIndicatorCompact connected, busy, away or offline state.
Preview & code CalloutA flexible in-content note with semantic tones and Lucide icon.
Preview & code NotificationCenterBell popover for read/unread activity and dismissal.
Preview & code UploadQueueTrack upload progress and expose pause, retry, cancel, and remove actions.
Preview & codeNavigation 9
Animated active indicator with keyboard arrow navigation.
Preview & code AccordionAnimated expand and collapse, with accessible controls.
Preview & code PaginationAccessible pagination with previous/next controls.
Preview & code BreadcrumbSemantic hierarchical navigation.
Preview & code StepsA compact progress tracker for multi-step workflows.
Preview & code CommandPaletteSearch commands using the familiar ⌘K shortcut.
Preview & code CollapsibleSmooth content expansion for secondary sections.
Preview & code TreeViewExpandable project and folder navigation with accessible roving keyboard focus.
Preview & code FileExplorerFolder tree with breadcrumbs, item selection, rename and file-drop hooks.
Preview & codeOverlays 8
Modal dialog with backdrop and keyboard dismissal.
Preview & code DropdownMenuA keyboard-navigable menu with accessible selection and dismissal.
Preview & code PopoverAn anchored floating panel for contextual UI.
Preview & code TooltipLightweight focusable contextual hints.
Preview & code HoverCardA compact hover/focus card for secondary content.
Preview & code DrawerA slide-in panel with semantic dialog interaction.
Preview & code AlertDialogConfirmation dialog for important choices.
Preview & code ContextMenuRight-click and Shift+F10 actions with keyboard navigation.
Preview & codeLayout 10
Responsive two-column shell with coordinated sidebar collapse.
Preview & code SidebarCompound sidebar with groups, links, and logo-only collapse.
Preview & code PageHeaderConsistent page title, eyebrow, description and actions.
Preview & code ScrollAreaKeyboard-accessible constrained scrolling.
Preview & code NavbarA unified application top bar with branded navigation.
Preview & code ContainerResponsive max-width page container.
Preview & code StackA spacing-aware flex layout primitive.
Preview & code GridA responsive CSS grid composition primitive.
Preview & code ResizablePanelsTwo independently scrollable surfaces with drag-to-resize and arrow-key resizing.
Preview & code AspectRatioKeep images, previews or content at a fixed proportion.
Preview & codeTheming 5
Dark/light toggle with an animated page reveal.
Preview & code SchemeSwitcherChoose from five system-wide color accents.
Preview & code ThemeProviderOne provider for project defaults and live appearance preferences.
Preview & code ColorPaletteEditorInteractive accent color and 11-shade token scale generator.
Preview & code MotionPlaygroundExplore subtle, lift and disabled motion with interactive buttons.
Preview & codeData 8
Sortable, searchable, paginated rows.
Preview & code StatCardA ready-to-use metric card.
Preview & code TimelineAn activity feed with connecting markers.
Preview & code MeterA labelled usage meter with accessible bounds and semantic tones.
Preview & code KanbanBoardDrag tasks across columns or use keyboard-accessible move buttons.
Preview & code DataGridEditable, sortable tabular data with resizable columns.
Preview & code DiffViewerReadable inline or split code differences with added and removed lines.
Preview & code PermissionMatrixManage role-permission grants in a compact accessible grid.
Preview & code