Tabs animation does not work when href specified in the props

[0x090909]

Page is being reloaded and no underline animation of the selected item works

[ieedan]

I think this is an HMR issue I think if you do a refresh it should self fix

[0x090909]

strange because if I take out the href prop it works

[ieedan]

Oh wait it's not underlined because your current path doesn't match the paths of any provided by href

[ieedan]

That's the intended behavior if you make the href something like "/" it will match anything and will therefore show selected

[0x090909]

No wait, the underline works, its the animation of underline that goes from the current selected to the new selected that does not work when href is specified

[ieedan]

Are you using Sveltekit?

[0x090909]

yes

[ieedan]

It is probaly not animating because of the navigation but it depends on how you are rendering it I would need a repro to really know.

[0x090909]

maybe works with prerendered true only

[ieedan]

If you can create a repro I can take a look at it. Its always worked in the applications I have used it in.

[0x090909]

Okay I recreated the case and it works, my problem then must be because Im using geist ui + shadcn, and some css properties might collide, is it possible somehow to import only the tabs from geist without importing everything else in tailwind?

[ieedan]

No it's currently not. I don't think it's colliding I'm currently migrating to shadcn for one of my biggest projects right now and I haven't run into any issues with this. The only overrides this library has is the gray colors.

More than likely I think the project structure is incorrect and you may not have your tabs component in a layout.

If you are looking for a fully shadcn compatible option check out https://geist.shyakadavis.me/. It's not a component library but it has the same style and APIs (probably better).

Again I haven't run into any issues while using both in my projects.