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

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