Animated Tabs Bar

Switch between views; the highlight glides to the active tab.

@base-ui/reactmotiontailwind-merge

Tune the Real Props

Themeghibli

Colour palette. The Primary pill and the underlines use its primary colour; any theme but Default also tints the active tab's text with the underline styles.

Modelight

Light or dark version of the palette.

Active indicatorglide

How the active tab is marked: a pill or underline that glides to it, or an underline that fades in.

Active tab colourprimary

Colour of the gliding pill. Only used by Glide pill.

Roundnessmd

Corner radius of the tabs, the pill and the borders.

Content animationslide

How content changes when you switch tabs.

Slide distance

How far content slides when switching tabs, in pixels. Needs Content animation set to Slide.

Fade duration

How long the fade takes, in seconds. Needs Content animation set to Fade in / out.

Duration

How long the indicator and content take to move, in seconds.

Bounce

Springiness of the indicator and slide. Does nothing with Fade underline unless Content animation is Slide.

Request a Custom Animation

Need a custom effect? Tell us what to create.

Animated Tabs Bar

Request a Custom Animation

Related Effects

GSAP Flip Card

Information Drawer

Liquid Shatter

Timeline

Globe

Animated Tabs Bar

Request a Custom Animation

Related Effects

GSAP Flip Card

Information Drawer

Liquid Shatter

Timeline

Globe