search

ieedan / geist-ui-svelte

A UI Library for Svelte built to match Vercel's design inspired by other librarys such as geist-ui
https://geist-ui-svelte.dev
MIT License
19 stars 8 forks source link

Tabs animation does not work when href specified in the props #267

Closed 0x090909 closed 3 months ago

0x090909 commented 3 months ago

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

ieedan commented 3 months ago

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

0x090909 commented 3 months ago

strange because if I take out the href prop it works

ieedan commented 3 months ago

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

ieedan commented 3 months ago

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

0x090909 commented 3 months ago

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 commented 3 months ago

Are you using Sveltekit?

0x090909 commented 3 months ago

yes

ieedan commented 3 months ago

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 commented 3 months ago

maybe works with prerendered true only

ieedan commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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.