Tabs

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Switch between panels of content, built on Headless UI's Tabs:

import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@vinui/react';

<TabGroup>
  <TabList aria-label="Settings">
    <Tab>Account</Tab>
    <Tab>Billing</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>Name, email and photo.</TabPanel>
    <TabPanel>Plan and invoices.</TabPanel>
  </TabPanels>
</TabGroup>;

• Arrow keys move between tabs. Focusing a tab selects it; pass manual to require Enter or Space instead.
• vertical lays the tabs out beside the panels (Up/Down arrows move between them).
• Use defaultIndex, or selectedIndex with onChange to control the selected tab. Icons can go inside a Tab.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.