Tabs Component

The Tabs component organizes content into separate panels that can be switched between. Perfect for displaying different views or sections of related content.

Basic Tabs

Overview content goes here. This is the first tab.

Tabs with Rich Content

Historical Background

Discover the rich history of this region, from ancient Roman settlements to Renaissance cultural achievements.

Vertical Tabs

Vertical tab content 1

Usage Example

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';

<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>

// Multiple tabs open
<Tabs type="multiple">...</Tabs>

// Vertical orientation
<Tabs orientation="vertical">...</Tabs>