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.

package examples import (

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

shadcn-templ add tabs

Copy and paste the following code into your project.

components/tabs/tabs.templ

package tabs import (	"context"	"github.com/axadrn/shadcn-templ/v2/utils") type Orientation string const (	OrientationHorizontal Orientation = "horizontal"	OrientationVertical   Orientation = "vertical") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Orientation of the tabs. Defaults to horizontal.	Orientation Orientation	// DefaultValue is the value of the initially active tab.	DefaultValue string} type Variant string const (	VariantDefault Variant = "default"	VariantLine    Variant = "line") type ListProps struct {	ID         string	Class      string	Attributes templ.Attributes	// Variant of the list. Options: 'default' (filled), 'line' (underline).	Variant Variant} type TriggerProps struct {	ID         string	Class      string	Attributes templ.Attributes	Value    string	Disabled bool	TabsID   string} type ContentProps struct {	ID         string	Class      string	Attributes templ.Attributes	Value  string	TabsID string} templ Tabs(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ tabsID := p.ID }}	if tabsID == "" {		{{ tabsID = utils.RandomID() }}	}	if p.Orientation == "" {		{{ p.Orientation = OrientationHorizontal }}	}	<div		if p.ID != "" {			id={ p.ID }		}		class={ utils.CN("cn-tabs group/tabs flex data-horizontal:flex-col", p.Class) }		data-tui-tabs		data-orientation={ string(p.Orientation) }		data-horizontal?={ p.Orientation == OrientationHorizontal }		data-vertical?={ p.Orientation == OrientationVertical }		data-tui-tabs-id={ tabsID }		{ p.Attributes... }	>		{{ ctx = context.WithValue(ctx, "tabsId", tabsID) }}		{{ ctx = context.WithValue(ctx, "tabsDefaultValue", p.DefaultValue) }}		{ children... }	</div>} templ List(props ...ListProps) {	{{ var p ListProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ tabsID := IDFromContext(ctx) }}	<div		if p.ID != "" {			id={ p.ID }		}		class={			utils.CN(				"cn-tabs-list group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",				listVariantClasses(p.Variant),				p.Class,			),		}		data-variant={ string(listVariant(p.Variant)) }		data-tui-tabs-list		data-tui-tabs-id={ tabsID }		{ p.Attributes... }	>		{ children... }	</div>} templ Trigger(props ...TriggerProps) {	{{ var p TriggerProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ tabsID := p.TabsID }}	if tabsID == "" {		{{ tabsID = IDFromContext(ctx) }}	}	if p.Value == "" {		<span class="text-xs text-destructive">Error: Tab Trigger missing required 'Value' attribute.</span>	}	<button		if p.ID != "" {			id={ p.ID }		}		type="button"		class={			utils.CN(				"cn-tabs-trigger relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",				"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",				"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",				p.Class,			),		}		data-tui-tabs-trigger		data-tui-tabs-id={ tabsID }		data-tui-tabs-value={ p.Value }		data-tui-tabs-state={ utils.IfElse(tabsIsActive(ctx, p.Value), "active", "inactive") }		data-active?={ tabsIsActive(ctx, p.Value) }		disabled?={ p.Disabled }		{ p.Attributes... }	>		{ children... }	</button>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	{{ tabsID := p.TabsID }}	if tabsID == "" {		{{ tabsID = IDFromContext(ctx) }}	}	if p.Value == "" {		<span class="text-xs text-destructive">Error: Tab Content missing required 'Value' attribute.</span>		return templ.NopComponent	}	<div		if p.ID != "" {			id={ p.ID }		}		class={			utils.CN(				"cn-tabs-content flex-1 outline-none",				map[string]bool{"hidden": !tabsIsActive(ctx, p.Value)},				p.Class,			),		}		data-tui-tabs-content		data-tui-tabs-id={ tabsID }		data-tui-tabs-value={ p.Value }		data-tui-tabs-state={ utils.IfElse(tabsIsActive(ctx, p.Value), "active", "inactive") }		{ p.Attributes... }	>		{ children... }	</div>} // tabsIsActive reports whether value is the root's DefaultValue.func tabsIsActive(ctx context.Context, value string) bool {	if dv, ok := ctx.Value("tabsDefaultValue").(string); ok {		return dv != "" && dv == value	}	return false} func IDFromContext(ctx context.Context) string {	if tabsID, ok := ctx.Value("tabsId").(string); ok {		return tabsID	}	return ""} func listVariant(v Variant) Variant {	if v == "" {		return VariantDefault	}	return v} func listVariantClasses(v Variant) string {	if listVariant(v) == VariantLine {		return "cn-tabs-list-variant-line gap-1 bg-transparent"	}	return "cn-tabs-list-variant-default bg-muted"}

components/tabs/tabs.js

(function () {  "use strict";   // Update tab state  function setActiveTab(tabsId, value) {    // Update all triggers with this tabs-id    document      .querySelectorAll(`[data-tui-tabs-trigger][data-tui-tabs-id="${tabsId}"]`)      .forEach((trigger) => {        const isActive = trigger.getAttribute("data-tui-tabs-value") === value;        trigger.setAttribute(          "data-tui-tabs-state",          isActive ? "active" : "inactive",        );        // Base UI marks the selected tab with a bare data-active attribute;        // the cn-tabs-trigger styles select on it.        trigger.toggleAttribute("data-active", isActive);      });     // Update all contents with this tabs-id    document      .querySelectorAll(`[data-tui-tabs-content][data-tui-tabs-id="${tabsId}"]`)      .forEach((content) => {        const isActive = content.getAttribute("data-tui-tabs-value") === value;        content.setAttribute(          "data-tui-tabs-state",          isActive ? "active" : "inactive",        );        content.classList.toggle("hidden", !isActive);      });  }   // Click handler  document.addEventListener("click", (e) => {    const trigger = e.target.closest("[data-tui-tabs-trigger]");    if (!trigger) return;     const tabsId = trigger.getAttribute("data-tui-tabs-id");    const value = trigger.getAttribute("data-tui-tabs-value");    if (tabsId && value) {      setActiveTab(tabsId, value);    }  });   // Initialize active states  function setupInitialStates() {    document.querySelectorAll("[data-tui-tabs]").forEach((container) => {      const tabsId = container.getAttribute("data-tui-tabs-id");      if (!tabsId) return;       // Find active trigger or use first      const activeTrigger =        container.querySelector(          `[data-tui-tabs-trigger][data-tui-tabs-state="active"]`,        ) || container.querySelector(`[data-tui-tabs-trigger]`);       if (activeTrigger) {        setActiveTab(tabsId, activeTrigger.getAttribute("data-tui-tabs-value"));      }    });  }   // Setup on load and mutations  document.addEventListener("DOMContentLoaded", setupInitialStates);  new MutationObserver(setupInitialStates).observe(document.body, {    childList: true,    subtree: true,  });   // Expose public API  window.tui = window.tui || {};  window.tui.tabs = {    setActive: setActiveTab,  };})();

Component scripts are loaded through the shared script bundle, see JavaScript.

Update the import paths to match your project setup.

Usage

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

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

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.

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

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.

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

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

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

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

package examples import (

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

Table Textarea

On This Page

Installation Usage Composition Line Vertical Disabled Icons API Reference Tabs TabsList TabsTrigger TabsContent

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.