@usevyre/react@usevyre/vue

Tabs

Accessible tab navigation following WAI-ARIA Tabs pattern. Supports keyboard navigation, disabled tabs, and controlled or uncontrolled active state.

Basic

useVyre is an AI-native design system that minimises hallucinations when AI writes frontend code.

import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@usevyre/react";

<Tabs defaultValue="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="tokens">Tokens</Tab>
    <Tab value="usage" disabled>Usage</Tab>
  </TabList>
  <TabPanels>
    <TabPanel value="overview">
      <p>Overview content here.</p>
    </TabPanel>
    <TabPanel value="tokens">
      <p>Token reference here.</p>
    </TabPanel>
  </TabPanels>
</Tabs>

<script setup>
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@usevyre/vue";
</script>
<template>
  <Tabs default-value="overview">
    <TabList>
      <Tab value="overview">Overview</Tab>
      <Tab value="tokens">Tokens</Tab>
      <Tab value="usage" disabled>Usage</Tab>
    </TabList>
    <TabPanels>
      <TabPanel value="overview">
        <p>Overview content here.</p>
      </TabPanel>
      <TabPanel value="tokens">
        <p>Token reference here.</p>
      </TabPanel>
    </TabPanels>
  </Tabs>
</template>

Controlled

Pass value + onChange (React) atau v-model (Vue) untuk mengontrol tab aktif dari luar.

Import from @usevyre/react. All components are typed with TypeScript.

const [tab, setTab] = useState("overview");

<Tabs value={tab} onChange={setTab}>
  ...
</Tabs>

const tab = ref("overview");

<Tabs v-model="tab">
  ...
</Tabs>

Keyboard navigation

← → move between tabs.Home / End jump to the first/last tab.Tab moves focus into the active panel.

Tabs props

Props

Prop	Type	Default	Description
`defaultValue`	`string`	`—`	Initially active tab (uncontrolled).
`value`	`string`	`—`	Controlled active tab.
`onChange`	`(value: string) => void`	`—`	React only. Called when the active tab changes.
`class / className`	`string`	`—`	Additional CSS class.

Tab props

Props

Prop	Type	Default	Description
`value`	`string`	`—`	Unique identifier matching a TabPanel value.
`disabled`	`boolean`	`false`	Prevents selection and skips keyboard navigation.

AI Context

Quick examples

Basic tabs

<Tabs defaultValue="overview">
  <TabList>
    <Tab value="overview">Overview</Tab>
    <Tab value="settings">Settings</Tab>
  </TabList>
  <TabPanels>
    <TabPanel value="overview">Overview content</TabPanel>
    <TabPanel value="settings">Settings content</TabPanel>
  </TabPanels>
</Tabs>

← Table Toast →