Tabs Animation

[pexllecn]

can someone help in achieving this animation here for the tabs component https://play.tailwindcss.com/4DRvkUZTvK

[shahriarshafin]

@pexllecn did you find any solution to achieve this?

[pexllecn]

Unfortunately no :(

[fredle09]

I was also looking for a solution, and came across this https://shadcn-solid.com/docs/components/tabs

[pexllecn]

This is great! thanks for the help

[pexllecn]

it seems to be written in solidjs, is there any solution in nextjs?

[luccas-freitas]

it seems to be written in solidjs, is there any solution in nextjs?

Shadcn is from next.js (vercel) originally. You can find it here: https://ui.shadcn.com/

[ederbiason]

shadcn-solid Tabs component is based on kobalte, which has a "TabsIndicator" component that can be animated to indicate which tab has focus, it do not use native shadcn components.

Shadcn (react) is based on radix and doesn't have the same component tree with the indicator. This seems like it would be quite hard to implement while still using radix.

[list-jonas]

Hey everyone!

I made a project called Shadcn/UI - Animated Tabs that adds smooth animations to the Shadcn tabs component in Next.js.

Repo: shadcn-ui-animated-tabs
Live Demo: Live Preview

[tecoad]

@list-jonas A little PR to make it work in vertical. Thanks for this.

[pexllecn]

This is really GREAT! makes it very smooth @list-jonas this amazing!

[abdarker]

Hey everyone!

I made a project called Shadcn/UI - Animated Tabs that adds smooth animations to the Shadcn tabs component in Next.js.

Repo: shadcn-ui-animated-tabs Live Demo: Live Preview

it breaks in mobile device when there is more tabs or tab names are bigger. even shadcn's default one also breaks