Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

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.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn TabsExample() -> impl IntoView {
    view! {
        <Tabs value="overview" class="w-[400px]">
            <TabsList>
                <TabsTrigger value="overview">"Overview"</TabsTrigger>
                <TabsTrigger value="analytics">"Analytics"</TabsTrigger>
                <TabsTrigger value="reports">"Reports"</TabsTrigger>
                <TabsTrigger value="settings">"Settings"</TabsTrigger>
            </TabsList>
            <TabsContent value="overview">
                <Card>
                    <CardHeader>
                        <CardTitle>"Overview"</CardTitle>
                        <CardDescription>
                            "View your key metrics and recent project activity. Track progress
                            across all your active projects."
                        </CardDescription>
                    </CardHeader>
                    <CardContent class="text-sm text-(--muted-foreground)">
                        "You have 12 active projects and 3 pending tasks."
                    </CardContent>
                </Card>
            </TabsContent>
            <TabsContent value="analytics">
                <Card>
                    <CardHeader>
                        <CardTitle>"Analytics"</CardTitle>
                        <CardDescription>
                            "Track performance and user engagement metrics. Monitor trends and
                            identify growth opportunities."
                        </CardDescription>
                    </CardHeader>
                    <CardContent class="text-sm text-(--muted-foreground)">
                        "Page views are up 25% compared to last month."
                    </CardContent>
                </Card>
            </TabsContent>
            <TabsContent value="reports">
                <Card>
                    <CardHeader>
                        <CardTitle>"Reports"</CardTitle>
                        <CardDescription>
                            "Generate and download your detailed reports. Export data in
                            multiple formats for analysis."
                        </CardDescription>
                    </CardHeader>
                    <CardContent class="text-sm text-(--muted-foreground)">
                        "You have 5 reports ready and available to export."
                    </CardContent>
                </Card>
            </TabsContent>
            <TabsContent value="settings">
                <Card>
                    <CardHeader>
                        <CardTitle>"Settings"</CardTitle>
                        <CardDescription>
                            "Manage your account preferences and options. Customize your
                            experience to fit your needs."
                        </CardDescription>
                    </CardHeader>
                    <CardContent class="text-sm text-(--muted-foreground)">
                        "Configure notifications, security, and themes."
                    </CardContent>
                </Card>
            </TabsContent>
        </Tabs>
    }
}

Line

Use the line variant for a line style.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn TabsLineExample() -> impl IntoView {
    view! {
        <Tabs value="overview">
            <TabsList variant="line">
                <TabsTrigger value="overview">"Overview"</TabsTrigger>
                <TabsTrigger value="analytics">"Analytics"</TabsTrigger>
                <TabsTrigger value="reports">"Reports"</TabsTrigger>
            </TabsList>
        </Tabs>
    }
}

Vertical

Use the vertical orientation for vertical tabs.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn TabsVerticalExample() -> impl IntoView {
    view! {
        <Tabs value="account" orientation="vertical">
            <TabsList>
                <TabsTrigger value="account">"Account"</TabsTrigger>
                <TabsTrigger value="password">"Password"</TabsTrigger>
                <TabsTrigger value="notifications">"Notifications"</TabsTrigger>
            </TabsList>
        </Tabs>
    }
}

Disabled

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn TabsDisabledExample() -> impl IntoView {
    view! {
        <Tabs value="home">
            <TabsList>
                <TabsTrigger value="home">"Home"</TabsTrigger>
                <TabsTrigger value="settings" disabled=true>
                    "Disabled"
                </TabsTrigger>
            </TabsList>
        </Tabs>
    }
}

Icons

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn TabsIconsExample() -> impl IntoView {
    view! {
        <Tabs value="preview">
            <TabsList>
                <TabsTrigger value="preview">{icon!(icondata::LuAppWindow)} "Preview"</TabsTrigger>
                <TabsTrigger value="code">{icon!(icondata::LuCode)} "Code"</TabsTrigger>
            </TabsList>
        </Tabs>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::tabs::*;

#[component]
pub fn TabsAnatomy() -> impl IntoView {
    view! {
        <Tabs>
            <TabsList>
                <TabsTrigger />
            </TabsList>
            <TabsContent />
        </Tabs>
    }
}

API Reference

Tabs

Contains all the tabs component parts.

Custom Attributes
Name	Type	Default	Description
orientation	String	"horizontal"	Set which direction the tabs should flow. Accepted values: "horizontal" \| "vertical".
value	String	""	Reactive signal coupled to the `value` of the current selected tab.

Implements global attributes.

TabsContent

Contains the content associated with each trigger.

Custom Attributes
Name	Type	Default	Description
value	String	""	This tab's trigger value.

Implements global attributes.

TabsList

Contains the triggers that are aligned along the edge of the active content.

Custom Attributes
Name	Type	Default	Description
variant	String	"default"	Set the display variant of the tab buttons. Accepted values: "default" \| "line".

Implements global attributes.

TabsTrigger

The button that activates its associated content.

Custom Attributes
Name	Type	Default	Description
value	String	""	The value of the tab that this button triggers.

Implements global and button attributes.

Getting Started

Components

Tabs

Overview

Analytics

Reports

Settings

Line

Vertical

Disabled

Icons

Anatomy

API Reference

Tabs

TabsContent

TabsList

TabsTrigger