base
sm
md
lg
xl
2xl
Demo: Animated Tabs
Radix UI tabs don't natively support an animatable indicator, but you can fake it without an extra DOM element:
Tab 1
How it works
- Since we're not adding DOM elements here, we'll add a pseudoelement to each trigger to serve as the indicator. Then inset it and apply a transform of
translateX(100%)
to move it beyond the right edge (not the left – more on that below). - When active, toggle
translateX
back to 0. Adding a duration and easing will now make it in from the right. - Tailwind gives us group and peer selectors, which we can use here. Peer only works on previous siblings, which is why we've translated it right initially. So when a (previous) peer is active, we now want the indicator to move in from the left instead. To do that, conditionally change its translation to -100% based on the peer state. Click the trigger when the peer is toggled on and off to see the difference:
- Here's an example with multiple triggers (with a ToggleGroup subbing in for tabs). Only the latter two items have indicators and they've been moved below the tiggers, so you can see how they overlap when adjacent siblings are selected. This is what gives the illusion of a single indicator in the final version.