Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Animated Tabs

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

Open in

Product Tab

dummy image

Services tab

dummy image

Playground tab

dummy image

Content tab

dummy image

Random tab

dummy image

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

PropTypeDescription
tabsTab[]An array of Tab objects. Each Tab object has title, value, and content properties.
containerClassNamestringOptional. CSS class name for the container div.
activeTabClassNamestringOptional. CSS class name for the active tab.
tabClassNamestringOptional. CSS class name for the tab.
contentClassNamestringOptional. CSS class name for the content div.

FadeInDiv Component

PropTypeDescription
classNamestringOptional. CSS class name for the FadeInDiv.
tabsTab[]An array of Tab objects. Each Tab object has title, value, and content properties.
activeTabThe currently active Tab object.
hoveringbooleanOptional. 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

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji