Components

vuecs ships its components across separate packages — install only what you use. Each package is also a Vue plugin (app.use(formControls)) for global registration.

@vuecs/button

Component	Notes
Button	General-purpose button with color/variant/size and a useSubmitButton() create-update helper

@vuecs/countdown

Component	Notes
Countdown	Timer countdown with typed slot props

@vuecs/elements

Component	Notes
Alert	Persistent banner — color × variant × size matrix; severity-derived ARIA role; auto-resolved leading icon
AspectRatio	Responsive media container that maintains a width / height ratio (Reka primitive)
Avatar	Image with graceful fallback (initials, icon, slot) — Reka primitive
Badge	Status pill — solid / soft / outline × semantic color matrix
Card	Compound surface — <VCCard> outer + Header / Title / Description / Body / Footer parts; variant + padding via context
Collapse	Reka Collapsible wrapper — v-model:open, auto-chevron, height transition; composes with Alert for dismiss animation
Separator	Horizontal / vertical divider with proper ARIA (Reka primitive)
Tag	Removable, value-bound chip + <VCTags> list helper
VisuallyHidden	Screen-reader-only content (Reka primitive)

@vuecs/forms

Component	Notes
FormInput	Text input with optional debounce
FormNumber	Typed numeric input with steppers (Reka primitive)
FormPin	PIN / OTP input (Reka primitive)
FormTextarea	Multi-line text input
FormSelect	Dropdown select with FormOption shape + grouping
FormSelectSearch	Searchable select for long option lists
FormCheckbox	Checkbox + group (Reka primitive); supports tri-state
FormSwitch	Toggle switch (Reka primitive)
FormRadio	Radio + group with single v-model (Reka primitive)
FormSlider	Single-thumb or range slider; thumb count derives from v-model shape
FormTags	Multi-value chip input (Reka primitive)

@vuecs/gravatar

Component	Notes
Gravatar	Gravatar avatar from email address

@vuecs/icon

Component	Notes
Icon	Iconify-backed icon component used by VCButton, VCPagination, …

@vuecs/link

Component	Notes
Link	Router-aware anchor (vue-router / nuxt)

@vuecs/list

Component	Notes
List	Compound list (List/Header/Body/Item/Footer/Loading/NoMore) + useList()

@vuecs/locale

Composable	Notes
Locale	Browser-language-aware, resettable locale source — useLocaleManager() + useLocale(); bridges into core config

@vuecs/navigation

Component	Notes
Navigation	Multi-level nav with router integration
Stepper	Multi-step wizard / checkout / onboarding navigator (Reka primitive)

@vuecs/overlays

Component	Notes
Modal	Compound dialog (VCModal* parts) + useModal() view-stack composable
Popover	Floating panel anchored to a trigger (floating-ui positioning)
HoverCard	Hover-triggered floating panel with grace-area handling
Tooltip	Hover/focus text bubble; app-level <VCTooltipProvider> for delays
Toast	Transient notifications via shared useToast() queue; auto-dismiss, swipe-to-close, action button
DropdownMenu	Click-triggered action menu with arrow/typeahead navigation
ContextMenu	Right-click menu (same shape as DropdownMenu, cursor-anchored)

@vuecs/pagination

Component	Notes
Pagination	Offset/limit page navigation

@vuecs/table

Component	Notes
Table	Compound table — <VCTable> + 8 parts (Header / Body / Footer / Row / Cell / HeadCell / Empty / Loading) with a :columns :data driver, controlled sort, row-meta variants, and opt-in row keyboard nav

@vuecs/timeago

Component	Notes
Timeago	Relative time display

Conventions across components

• Every component takes themeClass (slot class overrides) and themeVariant (variant values) — see Theme System.
• Components use TypeScript render functions (defineComponent + h()) — there are no .vue SFCs to compile in most packages, except form-controls.
• Slot props are typed and exported per component — ListItemSlotProps, NavItemLinkSlotProps, CountdownSlotProps, etc.