Animated Tabs
Tabs to switch content, click on a tab to check background animation.
Installation
Run the following command
npx shadcn@latest add @aceternity/tabs
Copy to globals.css
to hide scrollbar (optional)
.no-visible-scrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.no-visible-scrollbar::-webkit-scrollbar {
display: none;
}
Props
Prop | Type | Description |
---|---|---|
tabs | Tab[] | An array of Tab objects. Each Tab object has title, value, and content properties. |
containerClassName | string | Optional. CSS class name for the container div. |
activeTabClassName | string | Optional. CSS class name for the active tab. |
tabClassName | string | Optional. CSS class name for the tab. |
contentClassName | string | Optional. CSS class name for the content div. |
FadeInDiv Component
Prop | Type | Description |
---|---|---|
className | string | Optional. CSS class name for the FadeInDiv. |
tabs | Tab[] | An array of Tab objects. Each Tab object has title, value, and content properties. |
active | Tab | The currently active Tab object. |
hovering | boolean | Optional. A boolean indicating whether the mouse is hovering over the component. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

