@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>

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>

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.
← Table Toast →