Tabs

Requires JS

Tab are used to switch between different content within the same context

githubstorybook

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac odio tempor orci dapibus ultrices in. Tortor posuere ac ut consequat semper viverra. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Sit amet porttitor eget dolor morbi non arcu risus. Lorem sed risus ultricies tristique nulla aliquet enim tortor. Eu tincidunt tortor aliquam nulla. Eu mi bibendum neque egestas congue quisque.

Usage

import { Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger } from "#/ui/components/Tabs"
<Tabs tabs={[{
  title: 'Tab 1',
  content: <div className='w-full h-12 bg-red-400'>Tab 1</div>
}, {
  title: 'Tab 2',
  content: <div className='w-full h-12 bg-blue-400'>Tab 2</div>
}, {
  title: 'Tab 3',
  content: <div className='w-full h-12 bg-green-400'>Tab 3</div>
}]} />

// or for more graular control

<TabsRoot>
  <TabsList>
    <TabsTrigger value="tab-1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab-2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab-3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab-1">
    <div className='w-full h-12 bg-red-400'>Tab 1</div>
  </TabsContent>
  <TabsContent value="tab-2">
    <div className='w-full h-12 bg-blue-400'>Tab 2</div>
  </TabsContent>
  <TabsContent value="tab-3">
    <div className='w-full h-12 bg-green-400'>Tab 3</div>
  </TabsContent>
</TabsRoot>

Customisation

Styling Panels

The tabs component does not provide any styling for the panels, but you can pass your own.

Tab 1

Further Customisation

If you need more fine-grain control you can access each layer of the tabs component individually.

First, update your import

import { TabsContent, TabsList, TabsRoot, TabsTrigger } from "#/ui/components/Tabs"

Then you can build your tabs out with the individual tab components
Table TextArea