Available nowReact
Animated tabs
Keyboard-first view switching with a shared spring selection marker.
shadcnRegistry install command
npx shadcn add http://localhost:3000/r/menace-tabs.jsonPreview
Live component behavior
Use it in context.
Copy the component into your project, then adapt the source to the interface around it.
TSXUsage example
import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@/components/menace-tabs";
<Tabs defaultValue="preview">
<TabsList aria-label="Component view"><TabsTrigger value="preview">Preview</TabsTrigger><TabsTrigger value="code">Code</TabsTrigger></TabsList>
<TabsPanel value="preview">Interactive preview</TabsPanel>
<TabsPanel value="code">Source code</TabsPanel>
</Tabs>API and behavior
valueuncontrolled- Controlled active tab value.
defaultValuefirst enabled tab- Initial value for uncontrolled tabs.
activationModeautomatic- Select on focus or require Enter and Space.
orientationhorizontal- Horizontal or vertical keyboard and visual orientation.
- Arrow, Home, and End keys move focus while skipping disabled triggers.
- Supports automatic or manual activation, vertical orientation, RTL, and optional looping.
- The shared selection indicator uses layout animation without moving trigger labels.