Components

Tabs

A set of tabbed panels for navigating between views.

example.tsx

Account settings content.

Import

tsx

import {
  AppTabs,
  AppTabsList,
  AppTabsTrigger,
  AppTabsContent,
} from "@/components/primitives/AppTabs"

API Reference

AppTabs extends all native <div> HTML attributes.

Prop	Type	Default	Description
defaultValue	string	—	The default selected tab value.
value	string	—	The controlled selected tab value.
onValueChange	(value: string) => void	—	Callback fired when the tab value changes.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppTabs.tsx

"use client"

import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs"

type AppTabsProps = React.ComponentProps<typeof Tabs>

function AppTabs(props: AppTabsProps) {
  return <Tabs {...props} />
}

function AppTabsList(props: React.ComponentProps<typeof TabsList>) {
  return <TabsList {...props} />
}

function AppTabsTrigger(props: React.ComponentProps<typeof TabsTrigger>) {
  return <TabsTrigger {...props} />
}

function AppTabsContent(props: React.ComponentProps<typeof TabsContent>) {
  return <TabsContent {...props} />
}

export { AppTabs, AppTabsList, AppTabsTrigger, AppTabsContent }