Skip to content
Appearance
Accent and overlay
Color mode

Tabs

Switch between related panels in the same space.

Upstream documentation

Examples

Overview panel

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Tabs
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/tabs.json'

Usage

A complete example using the installed component and hook paths.

Tabs usage
"use client";import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";function TabsPreview() {  return (    <Tabs defaultValue="overview" className="w-full max-w-72">      <TabsList>        <TabsTrigger value="overview">Overview</TabsTrigger>        <TabsTrigger value="details">Details</TabsTrigger>      </TabsList>      <TabsContent value="overview" className="p-2">        Overview panel      </TabsContent>      <TabsContent value="details" className="p-2">        Details panel      </TabsContent>    </Tabs>  );}export default function Demo() {  return <TabsPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Tabs

Tabs props
TabsPrimitive.Root.Props & { sound?: boolean }
orientation
"horizontal"
sound
true

TabsList

TabsList props
TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>
variant
"default"

TabsTrigger

TabsTrigger props
TabsPrimitive.Tab.Props & { sound?: boolean }
sound
true

TabsContent

TabsContent props
TabsPrimitive.Panel.Props

tabsListVariants

Exported value.

Source

Registry JSON