daemon-ui
Components

Tabs

Tabbed interface with keyboard navigation.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dmm1/daemon-ui'

Usage

Overview content here.
<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">OVERVIEW</TabsTrigger>
    <TabsTrigger value="analytics">ANALYTICS</TabsTrigger>
    <TabsTrigger value="settings">SETTINGS</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    Overview content here.
  </TabsContent>
  <TabsContent value="analytics">
    Analytics content here.
  </TabsContent>
  <TabsContent value="settings">
    Settings content here.
  </TabsContent>
</Tabs>

Features

  • Arrow key navigation between tabs
  • ARIA tablist, tab, and tabpanel roles
  • Controlled and uncontrolled modes
  • HUD-style active tab indicator

API Reference

ComponentPropsDescription
Tabsvalue, onValueChange, defaultValueRoot state manager
TabsListclassNameTab button container
TabsTriggervalue, disabledIndividual tab button
TabsContentvalueContent panel for a tab

On this page