Tabs · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JTabs } from '@juxtui/ui'

Usage #

<JTabs v-model="tab" :items="[
  { value: 'overview', label: 'Overview' },
  { value: 'activity', label: 'Activity' },
]">
  <template #overview>…</template>
  <template #activity>…</template>
</JTabs>

Variants & examples #

Pill#

A segmented control for compact view switches.

<script setup lang="ts">
const range = ref('7d')

const ranges = [
  { value: '24h', label: '24h' },
  { value: '7d', label: '7 days' },
  { value: '30d', label: '30 days' },
  { value: '90d', label: '90 days' },
]
</script>

<template>
  <JTabs v-model="range" variant="pill" size="sm" label="Time range" :items="ranges" />
</template>

Disabled tabs#

Name, avatar and default region.

<script setup lang="ts">
const tab = ref('general')

const items = [
  { value: 'general', label: 'General' },
  { value: 'members', label: 'Members' },
  { value: 'sso', label: 'SSO', disabled: true },
  { value: 'audit', label: 'Audit log' },
]
</script>

<template>
  <JTabs v-model="tab" :items="items">
    <template #general><p class="text-sm text-fg-secondary">Name, avatar and default region.</p></template>
    <template #members><p class="text-sm text-fg-secondary">Invite people and manage roles.</p></template>
    <template #audit><p class="text-sm text-fg-secondary">Who changed what, and when.</p></template>
  </JTabs>
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`string`	—	The selected tab’s `value`. Defaults to the first enabled tab.
items	`Array<{ value, label, disabled? }>`	—	The tabs.
variant	`'line' \| 'pill'`	`'line'`	Underline for sections, pill for view switches.
size	`'sm' \| 'md'`	`'md'`	Tab height.
fill	`boolean`	`false`	Stretch tabs to fill the width.
label	`string`	—	Accessible name of the tab list.

Events

Event	Payload	Description
update:modelValue	`string`	Emitted when a tab is selected.

Slots

Slot	Props	Description
[value]	`{ item, selected }`	One slot per tab, named after its `value`, for the panel.
tab	`{ item, selected }`	Custom tab label.

Accessibility #

Implements the WAI-ARIA tabs pattern with a roving tabindex and automatic activation.
Each panel is labelled by its tab and linked with aria-controls.
The indicator animates only on deliberate changes — never on resize — and not at all under reduced motion.

Keyboard #

Key	Action
`←→`	Select the previous or next tab, skipping disabled ones.
`HomeEnd`	Select the first or last tab.
`Tab`	Move focus from the tab list into the panel.