what is shadcn/ui

shadcn/ui (github repo) is an anti component library - not an npm dependency, not a js bundle, but a collection of copy-pastable components that help you build your own component library, built with Radix and Tailwind CSS.

how did shadcn-svelte happen

A known YouTuber in the Svelte community, Huntabyte, has had difficulties with component libraries all the time. When he first saw shadcn/ui, he was fascinated by it, but understandably, couldn’t use it (shadcn-ui was written for React). But then, he assembled a small team and they all ported the project to Svelte.

Warning: the project doesn’t have complete feature parity with the original.

links

Github: huntabyte/shadcn-svelte

Website: shadcn-svelte.com

my experience

I, as a Svelte & SvelteKit developer (and a contributor to shadcn-svelte), that is developing a Discord clone (idk why but yes), has had a very positive experience with it. When combining it flowbite-svelte (cloned into my project, and edited to use shadcn-svelte) turned out to be very nice and easy to use.

Yes, there are some caveats - you have to make a component library, opposed to using an already existing one. But you could also take my approach - partially migrate one to shadcn-svelte. This will be more efficient and less error prone, as everything there is, is yours.

  • JoyfulCodingGuy
    link
    fedilink
    English
    arrow-up
    2
    ·
    edit-2
    2 years ago

    Out of curiosity what was your reasoning for cloning and using flowbite with shadcn-svelte?

    Also, will you be posting an update once shadcn-svelte’s eventual move to using Melt UI is complete? 🙂

    • nothendevOPM
      link
      fedilink
      English
      arrow-up
      1
      ·
      1 year ago

      the flowbite & shadcn-svelte duo exists because flowbite has good (ish) ui out of the box, and remaking it with shadcn will just add more compatibility with other, non flowbite components, and most importantly, for fun!

      also, yes, I will post about, like, anything interesting, related to svelte, here.