registry:component

Tabs

v1.0.0ga

Tabbed interface primitive for segmented content.

Registry Endpoint

npx shadcn@latest add @aavya/ui-tabs

One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):

"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }

Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-tabs.json

Live Preview

Account tab content preview.

Props

Tabs forwards remaining props to TabsPrimitive.Root props.

Guidelines

Use tabs to switch between peer views of the same context.
Keep tab labels short and give each panel a clear heading.
Preserve the selected tab where it matters (e.g. in the URL).

Don’t

Don't use tabs for sequential steps — use a stepper or wizard.
Don't split content the user needs to compare at once across separate tabs.
Don't add more tabs than fit comfortably; consider a menu.

Accessibility

Role

tablist / tab / tabpanel (handled by Radix).

Keyboard

Arrow keys move between tabs; Home/End jump; the panel is a tab stop. (handled)

Screen reader

Each tab announces its selected state and the panel it controls. Give tabs concise labels — you provide this.

Focus

A roving tabindex keeps one tab stop; activating a tab shows its panel. (handled)

Gotcha

Don't put the only copy of important content in an inactive tab — it's hidden from the page and AT until selected.

Usage Snippet

import { Tabs } from '@/components/ui/tabs'

export default function Example() {
  return (
    <div className="p-6">
      <Tabs />
    </div>
  )
}

Source Preview

'use client'

import * as React from 'react'

import * as TabsPrimitive from '@radix-ui/react-tabs'

import { cn } from '@/lib/utils'

function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
  return <TabsPrimitive.Root data-slot='tabs' className={cn('flex flex-col gap-2', className)} {...props} />
}

function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
  return (
    <TabsPrimitive.List
      data-slot='tabs-list'
      className={cn(
        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
        className
      )}
      {...props}
    />
  )
}

function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
  return (
    <TabsPrimitive.Trigger
      data-slot='tabs-trigger'
      className={cn(
        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabl