Skip Navigation

shadcn-svelte - a Svelte port of shadcn/ui - an anti component library

www.shadcn-svelte.com shadcn-svelte

Beautifully designed components built with Radix Svelte and Tailwind CSS.

shadcn-svelte

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.

4
4 comments