On this page
Components
Every component has its own page with a live preview and copyable Vue code. Pick a category or use search.
Actions
BadgeSmall labels for status and categories.ButtonColorful actions with loading, size, and disabled states.Button GroupKeep related actions together.Copy ButtonCopy text with built-in feedback.KbdDisplay a keyboard shortcut.LinkA styled, semantic link for navigation.MarkerHighlight a few important words.ToggleA pressable on/off action.Toggle GroupChoose one option from a group of toggle buttons.
Display
AlertAn inline message with tone and optional dismissal.AvatarA person image or name-based fallback.CardA bold surface for grouped content.CarouselSwipe or use buttons to browse a sequence of slides.Empty StateA useful starting point when there is no data.MeterShow a measurement within a known range.ProgressShow how far a task has advanced.SkeletonA placeholder while content is loading.SpinnerShow an indeterminate loading state.StepperShow progress through a numbered workflow.TablePresent tabular data with strong borders.TimelineA sequence of dated events.
Forms
CheckboxA native checkbox with a visible label.ComboboxFilter and select from a searchable list.FieldConnect a label, hint, or error to any control.FieldsetGroup related form controls under a legend.InputLabeled native inputs with hints and error states.Input GroupAttach a prefix or suffix to an input.LabelA styled native label for a custom control.Native SelectA browser-native menu with the kit’s field styling.Number InputA number field with step controls.Pin InputAn accessible segmented verification code.Radio GroupOne choice from a set of radio cards.RatingA keyboard-accessible star rating.SelectA styled listbox for choosing an option.SliderChoose a numeric value by pointer or keyboard.SwitchA binary setting with keyboard support.Tags InputCreate and remove tags with the keyboard.TextareaA multiline field with label and feedback.
Navigation & layout
AccordionExpandable sections with keyboard navigation.Aspect RatioKeep media at a consistent proportion.BreadcrumbsShow the current page in a hierarchy.CollapsibleReveal one section on demand.Navigation MenuA structured menu for site navigation.PaginationNavigate a long list one page at a time.Scroll AreaA bounded, accessible region for overflow.SeparatorDivide related sections of content.TabsSwitch between related panels.
Overlays
Alert DialogAsk for confirmation before a consequential action.CommandSearch and run actions from one compact list.Context MenuActions available by right-click or keyboard.DialogAn accessible modal for focused tasks.DrawerA swipeable panel for a focused action.Dropdown MenuA keyboard-driven menu of actions.Hover CardExtra detail on hover or focus.MenubarPersistent application commands with arrow-key navigation.PopoverCompact interactive content near its trigger.SheetSlide in a panel without losing page context.ToastAnnounce a short-lived result without blocking.TooltipA short hint for pointer and keyboard users.