Actions
ButtonTriggers actions or events. Supports multiple variants, sizes, loading state and icon slots.ToggleA pressable button that maintains an on/off state. Lighter than Switch, designed for toolbars and filters.ToggleGroupA group of Toggle buttons for single or multiple selection. Ideal for view switchers and filter bars.
Form
CheckboxA boolean toggle with optional label and description.FormFieldForm field wrapper: label, description, animated error message. Provides context (id, error, disabled) to child components.ColorPickerA color selection component with swatches and a hex input. Triggers the native color picker on click.ComboboxA searchable select with built-in filter. Ideal for long option lists.DatePickerA date input that opens a Calendar in a popover. Supports min/max and a configurable date format.DateRangePickerDate range selector with two side-by-side calendars.FileUploadA drag-and-drop file upload zone with file type validation, size limits, and a file list.HelpTextSmall hint or error text displayed below a form input.InputText input with label, help text, error state and icon slots.LabelA form label that associates with an input via the for attribute.MultiSelectMultiple selection with chips for each chosen option.NumberInputA numeric input with integrated increment and decrement buttons, min/max support.OTP InputA segmented one-time password input for 2FA and verification codes. Supports paste and keyboard navigation.PhoneInputAn international phone number input with a searchable country code selector.RadioGroupA group of radio buttons for single-choice selection, with vertical/horizontal layout and card mode.SelectA styled native select for choosing from a list of options, with optional option groups.SliderA range slider with a filled track, thumb, and optional value display.SwitchA toggle switch for binary on/off settings.TagInputInput that creates tags/labels as you type.TextareaMulti-line text input with resizing options.TimePickerTime picker with 12h or 24h format, optional seconds.
Feedback
AlertCommunicates status, warnings, or contextual information to the user.AlertDialogA confirmation modal with a Cancel and Confirm action. Use it for destructive or irreversible operations.BadgeA small label for status, counts, or categories.ProgressA progress bar to indicate completion or loading.RatingAn interactive star rating component. Supports read-only display and configurable max.SpinnerAn animated loading indicator for async states.ToastTransient notifications triggered programmatically via useToast().TooltipA floating label that reveals additional context on hover/focus.
Display
AspectRatioWrapper that maintains a fixed width/height ratio for its content.CopyButtonButton that copies text to the clipboard with animated visual feedback. Uses the Clipboard API with fallback.NumberTickerAnimated counter that interpolates to a target value. Ideal for displaying statistics or KPIs.QRCodeDependency-free SVG QR code generator. Implements ISO 18004 standard versions 1–6, ECC level L (up to 134 bytes).AvatarDisplays a user image, or initials as a fallback.AvatarGroupStacked group of avatars with an overflow counter.CardA flexible surface container. Compose with DsCardHeader, DsCardContent and DsCardFooter.CarouselA responsive slide carousel with arrow controls, dot indicators, autoplay, and loop support.CodeBlockCode block with syntax highlighting, line numbers, and a copy button.EmptyStateA centered placeholder block for zero-data views with icon, title, description, and a CTA slot.HoverCardA rich floating card triggered on hover. Perfect for user profile previews or link previews.KbdInline keyboard shortcut badge using the semantic <kbd> element.NotificationItemNotification list item with avatar, title, description, and timestamp.ScrollAreaA container with a custom thin scrollbar styled using design tokens. Supports vertical, horizontal, and both directions.SeparatorA visual divider between sections of content.SkeletonA generic placeholder block for loading states.StatCardA KPI / metric card displaying a value, label, and optional trend indicator.StatusBadgeBadge with colored status indicator (online, offline, busy, away, pending).TagA compact label chip for categories, filters, or statuses. Optional remove button.TimelineA vertical list of events with status indicators, timestamps, and connecting lines.TreeViewInteractive hierarchical tree with expand/collapse and selection.VisuallyHiddenHides content visually while keeping it accessible to screen readers.
Charts
AreaChartGradient area chart. Supports multiple series, stacked mode, and interactive tooltips.BarChartAn SVG bar chart with grouped multi-series, grid, hover tooltips, optional value labels, and a legend.DonutChartAn SVG donut (or pie) chart with hover highlights, percentage legend, and a center total label.GaugeChartAnimated circular SVG gauge. Ideal for displaying a KPI, a progress indicator, or a bounded metric.LineChartAn SVG line chart with multi-series support, area fill, hover tooltips, and a legend. Zero dependencies.RadarChartSVG radar / spider web chart, zero dependencies.SparklineA minimal inline chart for KPI cards, tables, and dashboards. Supports line and bar types.
Data
CalendarAn interactive month calendar for date selection with keyboard navigation.DataTableAn enhanced table with built-in column sorting, full-text search, and pagination.KanbanKanban board with drag-and-drop columns and cards. Supports priorities, tags, and column customization.StepperA multi-step progress indicator for wizards and onboarding flows. Clickable steps.TableA styled data table with sortable columns, striped rows, and hover states.VirtualListVirtualized list: only visible elements are rendered in the DOM. Optimal performance for large collections.
Navigation
AccordionExpandable/collapsible sections to organize content.BreadcrumbDisplays the current page location within a navigation hierarchy.DropdownA contextual menu triggered by a button. Requires a trigger slot and an items array.MenubarDesktop application-style menu bar (File / Edit / View…).NavigationMenuHorizontal navigation menu with dropdown sub-menus.PaginationNavigate between pages of content with previous/next controls, page numbers, and ellipsis for large page counts.TabsOrganizes content into selectable panels.VerticalNavVertical sidebar navigation with groups, icons, badges, and sub-menus. Supports collapsed mode.
Layout
Overlay
AlertDialogA confirmation modal with a Cancel and Confirm action. Use it for destructive or irreversible operations.BannerDismissible announcement bar, ideal for global messages at the top of the page.CollapsibleA simple expand/collapse toggle for progressive disclosure. Lighter alternative to Accordion.ConfirmDialogSimplified confirmation dialog with danger or primary variant.DrawerA compound side drawer that slides in from any edge. Composed of DsDrawerHeader, DsDrawerContent and DsDrawerFooter sub-components for a structured layout.Command PaletteA ⌘K search modal for quick navigation and actions. Keyboard-navigable with grouped results.Context MenuA right-click contextual menu. Wrap any content to attach a context menu.LoadingOverlayLoading overlay that overlays its parent content.ModalAn accessible dialog overlay with ESC to close and focus trap. Requires v-model and a trigger.PopoverA generic floating panel triggered by clicking its trigger slot. Can contain any content.SheetA side panel that slides in from any edge. Useful for drawers, menus, or settings panels.