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:

primary
secondary
accent
success
warning
danger
error
info

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

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>