Animated Tabs

Tabs to switch content, click on a tab to check background animation.

hero features product utility

Product Tab

Services tab

Playground tab

Content tab

Random tab

Installation

Run the following command

npx shadcn@latest add @aceternity/tabs

Copy to `globals.css` to hide scrollbar (optional)

globals.css

.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

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access