Neumorphism UI

Tabs

Use Tabs to switch between related views within the same page and context.

Preview

Portfolio views

Switch between overview, activity, and settings; the overview begins with an illustrative portfolio value and monthly change.

Portfolio value₩18,420,000+6.8% this month

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/tabs

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Give TabsList a name and match each TabsTrigger value to its TabsContent. Choose a default value and use controlled state when other controls must follow the active view.

"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export default function Example() {
  return (
    <Tabs defaultValue="profile">
      <TabsList aria-label="Account settings">
        <TabsTrigger value="profile">Profile</TabsTrigger>
        <TabsTrigger value="security">Security</TabsTrigger>
      </TabsList>
      <TabsContent value="profile">Edit your profile.</TabsContent>
      <TabsContent value="security">Manage your security settings.</TabsContent>
    </Tabs>
  );
}

API Reference

Built on Base UI Tabs with the active trigger rendered as a raised surface and the list as an inset track. Supports controlled and uncontrolled values, automatic or manual activation, and horizontal or vertical orientation.

ComponentPropTypeDefaultDescription
Tabsvalue / defaultValuestring—The controlled active tab value or initial uncontrolled value.
TabsonValueChange(value: string) => void—Called when the active tab changes.
Tabsorientation"horizontal" | "vertical""horizontal"Sets the list orientation and Arrow key navigation axis.
TabsListactivateOnFocusbooleanfalseDetermines whether moving focus with Arrow keys also activates the panel.
TabsTriggervaluerequiredstring—A unique value shared with the associated TabsContent.
TabsContentvaluerequiredstring—The trigger value that opens the panel.

Accessibility

  • 01

    Name the tab group on TabsList with aria-label or aria-labelledby.

  • 02

    Base UI manages tab, tablist, and tabpanel roles and the aria-controls and aria-selected relationships.

  • 03

    Use activateOnFocus on TabsList only when panel switching is immediate.