Components
56 components — all AI-native with inline context blocks for Claude, Cursor, Copilot, and Windsurf.
Icons: useVyre is icon-agnostic — it ships none. Use any icon library (we recommend lucide-react / lucide-vue-next) and pass the icon to leftIcon, leftElement, or icon.
AccordionCollapsible sections with smooth animation.AlertContextual feedback with info, success, warning, and danger variants.AvatarUser profile photo with graceful initials fallback.BadgeShort status labels with dot indicator support.BoxSpacing-only container with token padding/margin and a controlled style escape hatch.BreadcrumbNavigation trail for deep page hierarchies.ButtonPrimary action element with 6 variants and loading state.Button GroupSegmented action row with shared borders and dividers.CalendarDate picker with single and range selection.CardContent container with header, body, and footer slots.CarouselAccessible content slider with snap scrolling, indicators, and keyboard nav.ChartsLineChart, AreaChart, BarChart, PieChart, and Sparkline — zero-dependency SVG, token-locked.CheckboxControlled checkbox with indeterminate state support.ComboboxSearchable dropdown with autocomplete and async data support.CommandCommand palette with search, keyboard navigation, and dialog mode.ConversationControlled chat/inbox thread with grouped bubbles, avatars, status, and composer.Data GridAdvanced table with column filters, sorting, and row selection.Date PickerInput trigger that opens a Calendar popover for single, range, or multiple dates.Date Range PickerCalendar-based start/end date input with range highlighting.Dropdown MenuContextual menu with checkbox items, radio groups, and submenus.Empty StateStandard placeholder for empty lists, tables, and search results.FieldForm field wrapper — props-based label/hint or composable parts.FormControlled, zero-dep form with built-in validation rules; errors auto-map into Field.GridTwo-dimensional CSS grid primitive with token gap and explicit or auto-fit columns.InputText input with label, helper text, and error state.ItemFlexible list-row primitive for menus, feeds, and settings lists.KanbanDrag-and-drop board built on Card with column and card controls.LabelAccessible form label with required indicator.ModalFocus-trapped dialog for confirmations and forms.Number InputNumeric input with steppers, min/max/step, and clamped controlled value.OTP InputSegmented one-time-code input for verification and 2FA.PaginationPage navigation with ellipsis and page size controls.PopoverFloating content anchored to a trigger element.ProgressLinear progress bar with determinate and indeterminate modes.RadioControlled single-choice group — options array or composable Radio children.Rich Text EditorMinimal WYSIWYG editor with formatting toolbar and markdown output.SelectDropdown select with search and multi-select support.SeparatorHorizontal or vertical visual divider.SheetSide panel that slides in from any edge.SidebarApp navigation sidebar with collapse and icon-only mode.SkeletonLoading placeholder with animated shimmer.SliderRange input with single and dual-handle support.StackFlex layout primitive replacing inline display:flex, with token-locked gap/align/justify.StatDashboard KPI card with value, label, delta, and trend.StepperMulti-step flow indicator for onboarding, checkout, and wizards.SwitchToggle switch for boolean settings.TableData table with sortable columns and striped rows.TabsTabbed interface for switching between content panels.TagDisplay chip for categories and filters, with removable and clickable variants.Tags InputMulti-value tag input with keyboard navigation and validation.TimelineVertical activity feed for audit logs and history.ToastNon-blocking notification with auto-dismiss.Toggle GroupSingle- or multi-select toggle buttons (segmented control).TooltipContextual label that appears on hover or focus.TreeHierarchical tree view for file explorers and nested navigation.TypographyHeading, Text, Lead, Code, and Blockquote primitives.