InteractionFree component
Animated tabs
Animated tabs with a sliding selection indicator and full keyboard navigation. Switch between views without losing context.
Preview
Open previewInstallation
Add animated tabs to your project, then make it your own.
shadcnRun in your terminal
npx shadcn add https://menaceui.com/r/menace-tabs.jsonUsage
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>Props
Key options and their defaults.
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.