---
title: Tabs
description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/card"
	"github.com/axadrn/shadcn-templ/v2/components/tabs"
)

type tabsDemoTab struct {
	Value       string
	Title       string
	Description string
	Content     string
}

var tabsDemoTabs = []tabsDemoTab{
	{"overview", "Overview", "View your key metrics and recent project activity. Track progress across all your active projects.", "You have 12 active projects and 3 pending tasks."},
	{"analytics", "Analytics", "Track performance and user engagement metrics. Monitor trends and identify growth opportunities.", "Page views are up 25% compared to last month."},
	{"reports", "Reports", "Generate and download your detailed reports. Export data in multiple formats for analysis.", "You have 5 reports ready and available to export."},
	{"settings", "Settings", "Manage your account preferences and options. Customize your experience to fit your needs.", "Configure notifications, security, and themes."},
}

templ TabsDemo() {
	@tabs.Tabs(tabs.Props{DefaultValue: "overview", Class: "w-[400px]"}) {
		@tabs.List() {
			for _, tab := range tabsDemoTabs {
				@tabs.Trigger(tabs.TriggerProps{Value: tab.Value}) {
					{ tab.Title }
				}
			}
		}
		for _, tab := range tabsDemoTabs {
			@tabs.Content(tabs.ContentProps{Value: tab.Value}) {
				@card.Card() {
					@card.Header() {
						@card.Title() {
							{ tab.Title }
						}
						@card.Description() {
							{ tab.Description }
						}
					}
					@card.Content(card.ContentProps{Class: "text-sm text-muted-foreground"}) {
						{ tab.Content }
					}
				}
			}
		}
	}
}
```

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add tabs
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="tabs" title="components/tabs/tabs.templ" />

<ComponentSource name="tabs" title="components/tabs/tabs.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/tabs"
```

```templ showLineNumbers
@tabs.Tabs(tabs.Props{DefaultValue: "account"}) {
	@tabs.List() {
		@tabs.Trigger(tabs.TriggerProps{Value: "account"}) {
			Account
		}
		@tabs.Trigger(tabs.TriggerProps{Value: "password"}) {
			Password
		}
	}
	@tabs.Content(tabs.ContentProps{Value: "account"}) {
		Account content.
	}
	@tabs.Content(tabs.ContentProps{Value: "password"}) {
		Password content.
	}
}
```

## Composition

Use the following composition to build `Tabs`:

```text
tabs.Tabs
├── tabs.List
│   ├── tabs.Trigger
│   └── tabs.Trigger
├── tabs.Content
└── tabs.Content
```

## Line

Use the `Variant: tabs.VariantLine` prop on `tabs.List` for a line style.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/tabs"

templ TabsLine() {
	@tabs.Tabs(tabs.Props{DefaultValue: "overview"}) {
		@tabs.List(tabs.ListProps{Variant: tabs.VariantLine}) {
			@tabs.Trigger(tabs.TriggerProps{Value: "overview"}) {
				Overview
			}
			@tabs.Trigger(tabs.TriggerProps{Value: "analytics"}) {
				Analytics
			}
			@tabs.Trigger(tabs.TriggerProps{Value: "reports"}) {
				Reports
			}
		}
	}
}
```

## Vertical

Use `Orientation: tabs.OrientationVertical` for vertical tabs.

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/tabs"

templ TabsVertical() {
	@tabs.Tabs(tabs.Props{DefaultValue: "account", Orientation: tabs.OrientationVertical}) {
		@tabs.List() {
			@tabs.Trigger(tabs.TriggerProps{Value: "account"}) {
				Account
			}
			@tabs.Trigger(tabs.TriggerProps{Value: "password"}) {
				Password
			}
			@tabs.Trigger(tabs.TriggerProps{Value: "notifications"}) {
				Notifications
			}
		}
	}
}
```

## Disabled

```templ
package examples

import "github.com/axadrn/shadcn-templ/v2/components/tabs"

templ TabsDisabled() {
	@tabs.Tabs(tabs.Props{DefaultValue: "home"}) {
		@tabs.List() {
			@tabs.Trigger(tabs.TriggerProps{Value: "home"}) {
				Home
			}
			@tabs.Trigger(tabs.TriggerProps{Value: "settings", Disabled: true}) {
				Disabled
			}
		}
	}
}
```

## Icons

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/icon"
	"github.com/axadrn/shadcn-templ/v2/components/tabs"
)

templ TabsIcons() {
	@tabs.Tabs(tabs.Props{DefaultValue: "preview"}) {
		@tabs.List() {
			@tabs.Trigger(tabs.TriggerProps{Value: "preview"}) {
				@icon.AppWindow()
				Preview
			}
			@tabs.Trigger(tabs.TriggerProps{Value: "code"}) {
				@icon.Code()
				Code
			}
		}
	}
}
```

## API Reference

### Tabs

The `tabs.Tabs` component is the root, it shares the tabs id with list, triggers and contents.

| Prop           | Type                                           | Default      |
| -------------- | ---------------------------------------------- | ------------ |
| `DefaultValue` | `string`                                       | -            |
| `Orientation`  | `OrientationHorizontal \| OrientationVertical` | `horizontal` |
| `Class`        | `string`                                       | -            |

### TabsList

The `tabs.List` component wraps the triggers.

| Prop      | Type                            | Default   |
| --------- | ------------------------------- | --------- |
| `Variant` | `VariantDefault \| VariantLine` | `default` |
| `Class`   | `string`                        | -         |

### TabsTrigger

The `tabs.Trigger` component activates its tab panel.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Value`    | `string` | -       |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### TabsContent

The `tabs.Content` component is the tab panel.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Value` | `string` | -       |
| `Class` | `string` | -       |