Navigation & disclosure@neumorphism-ui/tabs

Tabs

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.

@neumorphism-ui/tabs

Registry JSON

Preview

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

Installation

npx shadcn@latest add @neumorphism-ui/tabs

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

<Tabs defaultValue="surface">
  <TabsList aria-label="Design tokens">
    <TabsTrigger value="surface">Surface</TabsTrigger>
    <TabsTrigger value="motion">Motion</TabsTrigger>
    <TabsTrigger value="access">Access</TabsTrigger>
  </TabsList>
  <TabsContent value="surface">Raised and inset surface tokens.</TabsContent>
  <TabsContent value="motion">Short, consistent transition tokens.</TabsContent>
  <TabsContent value="access">Focus and contrast tokens.</TabsContent>
</Tabs>

API Reference

Component	Prop	Type	Default	Description
`Tabs`	`value / defaultValue`	`string`	`—`	The controlled active tab value or initial uncontrolled value.
`Tabs`	`onValueChange`	`(value: string) => void`	`—`	Called when the active tab changes.
`Tabs`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Sets the list orientation and Arrow key navigation axis.
`TabsList`	`activateOnFocus`	`boolean`	`false`	Determines whether moving focus with Arrow keys also activates the panel.
`TabsTrigger`	`value`required	`string`	`—`	A unique value shared with the associated TabsContent.
`TabsContent`	`value`required	`string`	`—`	The trigger value that opens the panel.