Tabs
A component for toggling between related panels on the same page.
Tabs wraps the Base UI Tabs
primitive and shares the segmented-control item sizing that installs with it. A
single highlight element is measured against the active tab and springs between
items on the snappy preset, including when the selection changes from the
keyboard. It supports the default and underline variants, horizontal and
vertical orientation, and exposes TabsTab as TabsTrigger and TabsPanel as
TabsContent.
Installation
npx shadcn@latest add @kosori/tabsExample
tabs-example.tsx
Tab 1 content
import { Tabs, TabsList, TabsPanel, TabsTab } from '@/components/ui/tabs';
const TabsExample = () => (
<Tabs defaultValue='tab-1'>
<TabsList>
<TabsTab value='tab-1'>Tab 1</TabsTab>
<TabsTab value='tab-2'>Tab 2</TabsTab>
<TabsTab value='tab-3'>Tab 3</TabsTab>
</TabsList>
<TabsPanel value='tab-1'>
<p className='p-4 text-center text-muted-foreground text-xs'>
Tab 1 content
</p>
</TabsPanel>
<TabsPanel value='tab-2'>
<p className='p-4 text-center text-muted-foreground text-xs'>
Tab 2 content
</p>
</TabsPanel>
<TabsPanel value='tab-3'>
<p className='p-4 text-center text-muted-foreground text-xs'>
Tab 3 content
</p>
</TabsPanel>
</Tabs>
);
export default TabsExample;
Usage
import { Tabs, TabsList, TabsPanel, TabsTab } from '@/components/ui/tabs';
const TabsDemo = () => (
<Tabs defaultValue='account'>
<TabsList>
<TabsTab value='account'>Account</TabsTab>
<TabsTab value='password'>Password</TabsTab>
</TabsList>
<TabsPanel value='account'>Account settings</TabsPanel>
<TabsPanel value='password'>Password settings</TabsPanel>
</Tabs>
);