Vue Component Map

This map defines the official Vue adapter surface. Vue projects should use these components before writing raw GNexus UI Kit markup.

Vue component	Kit contract	Notes
`GnButton`	`.btn`, `.btn-*`, `.with-icon`	Supports `variant`, `size`, `icon`, `loading`.
`GnIconButton`	`.btn-icon`	Icon-only button with required `label`.
`GnBadge`	`.badge`, `.badge-*`	Supports variants and primary outline.
`GnAlert`	`.alert`, `.alert-*`	Static feedback block.
`GnCard`	`.card`, `.card-title`, `.card-content`, `.card-footer`	Uses `title`, default slot, `footer` slot.
`GnPageHeader`	`.page-header`	Supports `kicker`, `title`, `subtitle`, `meta`, `actions`.
`GnInput`	`.form-group`, `.label`, `.input`	`v-model`, label, icon, state, help.
`GnTextarea`	`.form-group`, `.label`, `textarea.input`	`v-model`, label, icon, state, help.
`GnSelect`	`.select-wrap`, `.input.select`	`v-model`, options prop or option slot.
`GnCheckbox`	`.checkbox`	`v-model` boolean.
`GnSwitch`	`.checkbox`	Alias for current switch-like checkbox styling.
`GnTabs`	`.tabs`, `.tabs-list`, `.tab-panel`	Vue-native state through `v-model`.
`GnAccordion`	`.accordion`	Vue-native open state.
`GnModal`	`.modal`	Vue-native `v-model:open`; teleports to body.
`GnDrawer`	`.drawer`	Vue-native `v-model:open`; teleports to body.
`GnToastProvider`	`.toast`	Provides `useToast()`.
`GnConfirmDialog`	`GnModal` + actions	Emits `confirm` / `cancel`.
`GnTable`	`.table`, `.table-wrapper`	Columns/rows with scoped cell slots.
`GnToolbar`	`.toolbar`	Title/meta with action slot.
`GnInputGroup`	`.input-group`	Addon/default/action slots.
`GnSearchField`	`.input-group.search-field`	Search input with clear action.
`GnPagination`	`.pagination`	`v-model:page` style via `update:page`.
`GnEmptyState`	`.empty-state`	Icon, title, text, actions.
`GnSkeleton`	`.skeleton`, `.skeleton-stack`	Loading placeholders.
`GnDescriptionList`	`.description-list`	Key-value metadata.
`GnProgress`	`.progress`	Determinate progress.
`GnSteps`	`.steps`	Wizard/staged process.
`GnChip`	`.chip`	Static/selectable/removable chip.
`GnChipGroup`	`.chip-group`	Chip layout wrapper.
`GnAvatar`	`.avatar`	Initials/icon/image/status.
`GnIdentity`	`.identity`	Avatar + title/meta row.
`GnAvatarStack`	`.avatar-stack`	Compact avatar group.
`GnTimeline`	`.timeline`	Activity/event timeline.
`GnActivityLog`	`.activity-log`	Compact log rows.
`GnDropdown`	`.dropdown`, `.dropdown-menu`	Vue-native open state, outside click, Escape.
`GnPopover`	`.popover`, `.popover-panel`	Vue-native contextual panel.
`GnTooltip`	`.tooltip`, `.tooltip-panel`	Focus/hover tooltip wrapper.
`GnNavList`	`.list.list-nav`	Navigation list items.
`GnNavigationShell`	`.nav-topbar`, `.nav-drawer`	Vue-native app shell drawer.

Variant Names

Use existing kit variants:

primary
secondary
accent
success
warning
danger
error
info

danger and error map to the same visual color in most components.

Slot Naming

GnTabs uses tab ids as slot names:

<GnTabs v-model="active" :items="[{ id: 'overview', label: 'Overview' }]">
  <template #overview>...</template>
</GnTabs>

GnTable uses cell-${column.key}:

<template #cell-status="{ value }">
  <GnBadge variant="success">{{ value }}</GnBadge>
</template>