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. 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>
);