# 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:

```text
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:

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

`GnTable` uses `cell-${column.key}`:

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