Tabs

A tabs component for organizing content into separate views.

Installation

npm install fuyukaki-ui

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'fuyukaki-ui'

function App() {
  return (
    <Tabs defaultValue="tab1">
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">Content 1</TabsContent>
      <TabsContent value="tab2">Content 2</TabsContent>
    </Tabs>
  )
}

Default Variant

Account Settings

Manage your account settings and preferences.

Outline Variant

Overview content goes here.

Pills Variant

All items displayed here.

Props

ComponentPropType
TabsdefaultValuestring
Tabsvaluestring
TabsonValueChange(value: string) => void
TabsListvariant'default' | 'outline' | 'pills'
TabsTriggervaluestring (required)
TabsTriggervariant'default' | 'outline' | 'pills'
TabsContentvaluestring (required)
TabsContentforceMountboolean