Tabs
Animated tab component with smooth sliding indicator and content transitions.
Preview
Tabs
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Content sections with multiple views and settings panels.
Why this component matters
Tabs let users choose their view without page navigation, keeping context stable.
Usage guidance
Use for 2-5 content sections that are mutually exclusive. The active indicator should slide smoothly between tabs. Keep tab labels to 1-2 words.
Installation
bash
npx shadcn@latest add @aceternity/tabsUsage
example.tsxtsx
import { Tabs } from "@/components/ui/tabs";
export default function Example() {
return (
<Tabs>
{/* Your content here */}
</Tabs>
);
}Source
aceternity-tabs.tsx
components/ui/aceternity-tabs.tsx