Thanks for the kind words and shoutout! Skeleton is privileged to appear alongside so many great options, with Melt from Thomas, Bits from Hunter, and Flowbite Zoltan and his crew. Please go check out their awesome projects! And keep an eye out for the next major version of Skeleton in the near future! It's going to be a huge leap forward with a ton of improvements. Matija, it won't be legit until you cover it of course. In the meantime, keep up the great work bud! 👍
@x9 I'm actually very keen to try this in v3, our next version. We're moving a lot of core features to our Tailwind plugin, which means you will be able to take the Skeleton theme system, Tailwind elements, our superset of utility classes, etc. and then apply them to any framework (or no framework at all). Which means there's potential to pair with Melt (or perhaps bits). I'm very excited to try it out honestly!
@@Huntabyte I loooove the structural design choices that were made when porting to shadcn-svelte and Bits UI. I'm newer in this space, and something about what you've done here has made UI libraries make so much more sense in my head.
Carbon even if it isn't the most beautiful one, is actually really useful when you want a business-looking application. The Carbon library has a lot of complex Svelte components that other libraries doesn't have. Imo it's the best choice when you don't care about the design that much but want to save time with advanced UI.
I ended up using Skeleton. It has been a nice experience. I think getting a complementary light and dark theme is a bit harder, it would be nice to be able to override in the theme editor maybe? I also looked at Flowbite Svelte back then, but it was not fully developed and DaisyUI wasn't as nice to use as Skeleton in my opinion.
I think PicoCSS (especially V2) is underrated, but maybe it's for my use case only. I work with SvelteKit and Golang(templates + HTMX) and both projects are completely separate; being able to interop css between two vastly different projects using what is essentially plain CSS is a huge win if you can't live in Node 100%. The trade off is of course that you have to learn basic CSS.
I'll have to check out pico! I actually built Bahunya.css back in uni but the quality of classless css frameworks have gotten way better over the years so i need to make mine better methinks. Pico looks really good for only having 10 classes
just rename the root element of both component instances using spread operator: const { element: { root: dialogRoot } } = createDialog() const { element: { root: comboboxRoot } } = createCombobox then you can proceed using the renamed root inside a single file.
I just learned about Tailwind component kits, and now im confused and wondering why these exist. I guess they just give me more specific behavior and technical stuff that i can do outside of just the base visual framework and base ability so i should probably take the tailwind "blocks' and then redo them with svelte components, if i want to have the Pick-A-Part web design approach from a larger library.
I think there are some patterns that we can use in svelte 5 that will make for a better headless UI library than melt. The method that they used was good, but now with svelte 5 it is a bit of a hacky api I think. Looking forward to see what the community comes up with using svelte 5.
3:40 I agree. I was thinking it would be nice to have tabs for levels of complexity. More examples are always better IMHO. Show people the full extent of what's possible, but start at the most very basic implementation.
when i tried Skeleton UI a long time ago, its project creation script installed (by default) a strange app layer that broke the way the site's body behaved (i don't remember exactly what the app layer was called, or what exactly it broke). i bailed on it cause of that and a couple other annoyances
You probably selected the template with the App Shell. But you can easily remove it if it's not what you need, it's just a layout component, or select the barebones template.
@@sebascoding yeah i went through the cli wizard again and deselected it. Just wasn't impressed with skeleton overall and melt looked more appealing for my workstyle
Thanks for another great presentation. I will take advantage of your invitation to comment on Tailwind. IMO, Tailwind was written to solve a problem which Svelte solves better and more elegantly, and therefore we don't need (and lose value) when we combine Tailwind with Svelte. In complex web projects, you become afraid to change any CSS, because a change can have ripple effects elsewhere. So Tailwind essentially eliminates the cascade. It does this at the cost of effectively making you learn a replacement language for CSS and of lots of verbosity in your HTML. The whole benefit of CSS, of separating content from style, is lost. Svelte, OTOH, keeps the useful part of the cascade, i.e. not having to duplicate classes ad nauseum, while solving the side effect problem by having CSS in one component not apply to other components. You still get the separation of content from style; you can have a file of global styles as well as the local ones; the result is far less verbose and uses the CSS you already know. For those reasons and more, I am opposed to using Tailwind with Svelte.
I can say that using daisyui is starting to make a lot more sense to me because its agnostic so i could use it with htmx as well but melt and shacn svelte are really good These vids are really well made , i dont sub much or like that often but this is really good so i actually subscribed and liked the video Cheers Also I really like the agnostic framework list including open props , I was wondering if I could use open props with daisyui?
I think it will still take a while to have any UI library that compares to the React ones in Svelte, but I'm really happy that some good ones are actually starting to appear now! I will start doing stuff with svelte as soon as Svelte 5 is released
I tried Melt UI, looks great! And I agree with you on Material. It looks old, dated. I find it boring now, seen too much of it on Google related stuff.
I'm sorry, but Carbon UI is the most professional looking. Has all the components you need, looks clean and to the point. Events, data bindings and all that fluff is up to the framework and how you code things out. UI component libraries are just that, UI components.
Rich Harris's philosophies are what drew me to Svelte, namely, his championing of "use the platform", and his resulting innate aversion to Tailwind; an aversion which I share. Tailwind is more than an abstraction, it's an entirely new language geared toward people who don't like CSS. From what I can tell, Tailwind is loved mostly by backend types who enjoy such jokes as: "XSS stands for cross-site-scripting because there was already another abomination by the name of CSS." That's a quote from Douglas Crockford. Programmers love to hate CSS, but it really has evolved into a powerful full-featured design language. As such, any abstraction is inherently blocked from benefiting from, and realizing, its true potential. To me, Svelte's style scoping makes writing CSS a joy. Programmers may enjoy the abstraction of Tailwind, but I don't see how an authentic web designer ever could.
Keeping going back to Daisy UI. Started using Skeleton but ran into problems with their utility components - Drawers, Modals and Toasts. All three of those use the "singleton pattern" and hand problems with displaying the correct date when displaying dynamic data from different pages. Ended up ripping out Skelton. Playing around with shadcn and my biggest problem is figuring out how to customize the components. Like how to turn the Menu component from horizontal to vertical. Hopefully it's a learning curve thing. The problem with all of these UIs is until you build a big project, you don't find the weaknesses .
All of this is just way too much. Every single element in a Select in all of these will try to grab multiple contexts because they all depend on melt-ui in the end (getContext() is actually pretty slow). That's because shad depends on bits-ui, and bits-ui depends on melt-ui, and on top of that they do Tailwind CSS class processing during runtime, cause of course they couldn't just do regular (performant) svelte style css. The amount of code that has to run here is incredible, and it makes a simple select with a couple thousand items lock up the entire window. So I wrote my own, and accessibility was the easiest part by far. So if that's what is keeping you from making your own, just do it.
this was interesting; did not know that melt powers bits powers shadcn/svelte. Would you mind sharing how you built your own? Sounds like you could publish a better library than them haha
It's a great library for when you need to make CRUDs or internal facing applications quickly and accessibly; without requiring brand consistency. It definitely felt more like a mention than an "honourable mention", likely because it doesn't have comprehensive backing from IBM. Check out the repo discussions and announcements for more details.
I used it, autocomplete has issues when you have many items in list, it becomes super slow and starts lagging. Table is not responsive. Overall has many of those small annoyances where components are lacking few details or props for certain things if you want to customize it and so on
I really appreciate you taking the time to put this out, but as someone just getting into Svelte this doesn't really cover the ground well enough to know how they really might work or which to use, it moves too quickly. I suppose if you were a dev experienced enough to move at this pace without any hands-on kind of examples then you wouldn't even need this video. I'll come back after I've tried to play with them a bit more and extract the wisdom you have to share. :)
Tailwind does make it a far worse experience to see in the docs, it's just extra information that gets in the way. I would love to see a tailwind fan tell me that tailwind within docs makes things clearer rather than using class names which say what it is and it's an unstyled library so you don't actually need to care about what it looks like
I need to have a look at MELT... every other UI component you've listed here is a bit hmm... unused? What about SMUI? Everything you've mentioned here is so messy and gross... Skeleton UI was one of the worst things I have ever tried to set up... shadcn-svelte wasn't even worth a mention, the only useful one I've ever found to actually do everything without the mess and rubbish was SMUI. All of the UI component libraries that you have suggested here defeat the purpose of component containers... Svelte was designed to do away with the crap that comes with absolutely terrible shit like Tailwind... but you're kinda defeating all of that by stuffing tailwind back in. For Svelte and other zero day frameworks... Tailwind needs to die.
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Thanks for the kind words and shoutout! Skeleton is privileged to appear alongside so many great options, with Melt from Thomas, Bits from Hunter, and Flowbite Zoltan and his crew. Please go check out their awesome projects! And keep an eye out for the next major version of Skeleton in the near future! It's going to be a huge leap forward with a ton of improvements. Matija, it won't be legit until you cover it of course. In the meantime, keep up the great work bud! 👍
All my apps I build using skeleton, it would be awesome if it's easier to upgrade for the new version when it comes out. Looking forward to it.
I wonder if it is practical you use Skeleton for their theming/design system and bits/melt for the component system.
Thanks to you, for making such good UI
@x9 I'm actually very keen to try this in v3, our next version. We're moving a lot of core features to our Tailwind plugin, which means you will be able to take the Skeleton theme system, Tailwind elements, our superset of utility classes, etc. and then apply them to any framework (or no framework at all). Which means there's potential to pair with Melt (or perhaps bits). I'm very excited to try it out honestly!
Skeleton is awesome for svelte. I really like the theme functionality
Great breakdown my friend! 🫡
Thank you! 🙇
o7 ty for ur service
I wonder if it is practical you use Skeleton for their theming/design system and bits/melt for the component system.
Another of my favourite RUclips channels. Shout out to huntabyte
I use shadcn-svelte for my projects
We are using Bits UI for all our projects 🥰
Pavel also designed all the example components for Bits UI and the docs and is a brilliant designer!
@@Huntabyte I loooove the structural design choices that were made when porting to shadcn-svelte and Bits UI. I'm newer in this space, and something about what you've done here has made UI libraries make so much more sense in my head.
That Shadcn - ShadCDN confusion hit right home for me
Quality stuff as always, always lookin gforward to your next video :)
Carbon even if it isn't the most beautiful one, is actually really useful when you want a business-looking application. The Carbon library has a lot of complex Svelte components that other libraries doesn't have. Imo it's the best choice when you don't care about the design that much but want to save time with advanced UI.
I would love a dedicated video on Melt and how you can bring your own stores and the best practices for state management
I’m just checking out svelte to build an idea and I can’t seem to find many svelte related videos. These videos are really good, keep it up!! 👍🏼💪🏼
Yessssss please make a seperate video on how to build our own components using MELT UI
I ended up using Skeleton. It has been a nice experience. I think getting a complementary light and dark theme is a bit harder, it would be nice to be able to override in the theme editor maybe? I also looked at Flowbite Svelte back then, but it was not fully developed and DaisyUI wasn't as nice to use as Skeleton in my opinion.
cool channel, thanks for putting in the work to save me time hunting down options for my next svelte project!
melt looks amazing 👌🏼
I think PicoCSS (especially V2) is underrated, but maybe it's for my use case only. I work with SvelteKit and Golang(templates + HTMX) and both projects are completely separate; being able to interop css between two vastly different projects using what is essentially plain CSS is a huge win if you can't live in Node 100%. The trade off is of course that you have to learn basic CSS.
I love Pico! 😄
I'll have to check out pico! I actually built Bahunya.css back in uni but the quality of classless css frameworks have gotten way better over the years so i need to make mine better methinks. Pico looks really good for only having 10 classes
THanks for this video. Melt UI looks good to me. Skeleton UI, too. Material Design is out simply because of the two banners on their home page.
PaperCSS components for Svelte, is also an awesome ui library with an paper drawn look.
thanks, didn't know about papercss!
Would love to see a video on bits and melt!
great overview! thank you🤠
A video on melt ui will be really great. I find it difficult when you start mixing the components for exemple a combobox in a dialog.
just rename the root element of both component instances using spread operator:
const {
element: { root: dialogRoot }
} = createDialog()
const {
element: { root: comboboxRoot }
} = createCombobox
then you can proceed using the renamed root inside a single file.
Yes please a detailed video about MeltUI 🥰
Thanks for taking the time to break all of this down. It would be fantastiawesome if you could do a video on MeltUI
Yes Please do a video of Melt UI
melt ui is really amazing , like really well done ,
It'd be awesome if there was a library as complete as AnyDesign for Svelte. Someone started to build such library a few years ago but it's abandoned.
I didn't realize there was that many. Pretty cool Rundown.
I’d love to see a video dedicated to melt!
I just learned about Tailwind component kits, and now im confused and wondering why these exist. I guess they just give me more specific behavior and technical stuff that i can do outside of just the base visual framework and base ability so i should probably take the tailwind "blocks' and then redo them with svelte components, if i want to have the Pick-A-Part web design approach from a larger library.
I think there are some patterns that we can use in svelte 5 that will make for a better headless UI library than melt. The method that they used was good, but now with svelte 5 it is a bit of a hacky api I think. Looking forward to see what the community comes up with using svelte 5.
3:40 I agree. I was thinking it would be nice to have tabs for levels of complexity. More examples are always better IMHO. Show people the full extent of what's possible, but start at the most very basic implementation.
when i tried Skeleton UI a long time ago, its project creation script installed (by default) a strange app layer that broke the way the site's body behaved (i don't remember exactly what the app layer was called, or what exactly it broke). i bailed on it cause of that and a couple other annoyances
You probably selected the template with the App Shell. But you can easily remove it if it's not what you need, it's just a layout component, or select the barebones template.
@@sebascoding yeah i went through the cli wizard again and deselected it. Just wasn't impressed with skeleton overall and melt looked more appealing for my workstyle
Shadcn-svelte is based on melt UI, i have to say that if you need quick components it's the most complete library
Thanks for another great presentation. I will take advantage of your invitation to comment on Tailwind. IMO, Tailwind was written to solve a problem which Svelte solves better and more elegantly, and therefore we don't need (and lose value) when we combine Tailwind with Svelte. In complex web projects, you become afraid to change any CSS, because a change can have ripple effects elsewhere. So Tailwind essentially eliminates the cascade. It does this at the cost of effectively making you learn a replacement language for CSS and of lots of verbosity in your HTML. The whole benefit of CSS, of separating content from style, is lost.
Svelte, OTOH, keeps the useful part of the cascade, i.e. not having to duplicate classes ad nauseum, while solving the side effect problem by having CSS in one component not apply to other components. You still get the separation of content from style; you can have a file of global styles as well as the local ones; the result is far less verbose and uses the CSS you already know. For those reasons and more, I am opposed to using Tailwind with Svelte.
Can we use DaisyUi with Melt-ui? 🤔🤔🔥🔥
yes, I personally use melt-ui with skeleton-ui
Hi, nice video, learned quite a bit about Svelte UI libraries. I have one question: What browser en tab extension are you using?
Super insightful as ever! Is there a CSS version of shadcn-svelte or are we basically looking at Bits-UI. Thanks again
no
I can say that using daisyui is starting to make a lot more sense to me because its agnostic so i could use it with htmx as well but melt and shacn svelte are really good
These vids are really well made , i dont sub much or like that often but this is really good so i actually subscribed and liked the video
Cheers
Also I really like the agnostic framework list including open props , I was wondering if I could use open props with daisyui?
I would love to see a video about the Melt UI
I love Melt UI, Bits UI, Shadcn Svelteee a lottttt
DaisyUI is awesome!
Can you showcase Melt UI in it's own video please?
Man Huntabyte is a beast
🔥🔥🔥
I am really liking Svelte-UX
I think it will still take a while to have any UI library that compares to the React ones in Svelte, but I'm really happy that some good ones are actually starting to appear now!
I will start doing stuff with svelte as soon as Svelte 5 is released
Everything I wanted to use still V.0 and not ready for production…😢
Great, thanx for the collection. What about the performance of these Libraries?
You don't have to think about it.
I tried Melt UI, looks great! And I agree with you on Material. It looks old, dated. I find it boring now, seen too much of it on Google related stuff.
I'm sorry, but Carbon UI is the most professional looking. Has all the components you need, looks clean and to the point. Events, data bindings and all that fluff is up to the framework and how you code things out. UI component libraries are just that, UI components.
Rich Harris's philosophies are what drew me to Svelte, namely, his championing of "use the platform", and his resulting innate aversion to Tailwind; an aversion which I share. Tailwind is more than an abstraction, it's an entirely new language geared toward people who don't like CSS. From what I can tell, Tailwind is loved mostly by backend types who enjoy such jokes as: "XSS stands for cross-site-scripting because there was already another abomination by the name of CSS." That's a quote from Douglas Crockford. Programmers love to hate CSS, but it really has evolved into a powerful full-featured design language. As such, any abstraction is inherently blocked from benefiting from, and realizing, its true potential. To me, Svelte's style scoping makes writing CSS a joy. Programmers may enjoy the abstraction of Tailwind, but I don't see how an authentic web designer ever could.
I'd also rather raw dog CSS
Dude what's ur browser? Or these tabs are an extensions?
Brave browser brou
Common Brave browser W, it's a super chad browser, once you take a min to hide and disable the crypto stuff if you're not interested in them.
I would like to see you talk on carbon-svelte
He said: ruclips.net/video/qyG-xWjNZKU/видео.htmlsi=FegNOs-p_NrRPUbT 😂
Lovely ❤
i love that this comments section is just wholesome nerds being excited about the things all the other nerds made 😊
came here after, "guys how cool is this"
Keeping going back to Daisy UI. Started using Skeleton but ran into problems with their utility components - Drawers, Modals and Toasts. All three of those use the "singleton pattern" and hand problems with displaying the correct date when displaying dynamic data from different pages. Ended up ripping out Skelton. Playing around with shadcn and my biggest problem is figuring out how to customize the components. Like how to turn the Menu component from horizontal to vertical. Hopefully it's a learning curve thing.
The problem with all of these UIs is until you build a big project, you don't find the weaknesses .
All of this is just way too much. Every single element in a Select in all of these will try to grab multiple contexts because they all depend on melt-ui in the end (getContext() is actually pretty slow). That's because shad depends on bits-ui, and bits-ui depends on melt-ui, and on top of that they do Tailwind CSS class processing during runtime, cause of course they couldn't just do regular (performant) svelte style css.
The amount of code that has to run here is incredible, and it makes a simple select with a couple thousand items lock up the entire window.
So I wrote my own, and accessibility was the easiest part by far. So if that's what is keeping you from making your own, just do it.
this was interesting; did not know that melt powers bits powers shadcn/svelte. Would you mind sharing how you built your own? Sounds like you could publish a better library than them haha
11:19 same here 🤣
The amount of work required is acceptable for me only in either Pico or Skeleton.
Something about most of the svelte ui libraries having almost identical websites makes me not want to use them
Why do you not have to say alot about carbon svelte? is it supposed to be obvious of how good or bad this UI is?
It's a great library for when you need to make CRUDs or internal facing applications quickly and accessibly; without requiring brand consistency.
It definitely felt more like a mention than an "honourable mention", likely because it doesn't have comprehensive backing from IBM. Check out the repo discussions and announcements for more details.
I used it, autocomplete has issues when you have many items in list, it becomes super slow and starts lagging.
Table is not responsive.
Overall has many of those small annoyances where components are lacking few details or props for certain things if you want to customize it and so on
we need a tutorial on how to crop image and send it to form action maybe svelte-easy-crop tutorials 😢😢
What is your browser? Arc?
I use Brave.
I really appreciate you taking the time to put this out, but as someone just getting into Svelte this doesn't really cover the ground well enough to know how they really might work or which to use, it moves too quickly. I suppose if you were a dev experienced enough to move at this pace without any hands-on kind of examples then you wouldn't even need this video. I'll come back after I've tried to play with them a bit more and extract the wisdom you have to share. :)
skeleton works for me.
The winner is: bits ui + pico css
what do you use ?
I use Melt UI.
Dedicated video for Melt please 😊
niceeeeeeeeeeeee
Tailwind does make it a far worse experience to see in the docs, it's just extra information that gets in the way. I would love to see a tailwind fan tell me that tailwind within docs makes things clearer rather than using class names which say what it is and it's an unstyled library so you don't actually need to care about what it looks like
bro teach me new svelte 5
After the release! 😄
All based on the clutter of tailwind "CSS". Dozens of tags for a simple button. Stupid to see this dumb concept being perpetuated...
That's pity that their code isn't in Svelte 5 yet
Can learn list of component libraries snd svelte, cannot learn css - your average web developer 😂
this is a super useful video thank you!
i actually don't think carbon looks that bad ahah ^^;;
Whoever smelte it, delt it
ez pz
And they all suck
I need to have a look at MELT... every other UI component you've listed here is a bit hmm... unused? What about SMUI? Everything you've mentioned here is so messy and gross... Skeleton UI was one of the worst things I have ever tried to set up... shadcn-svelte wasn't even worth a mention, the only useful one I've ever found to actually do everything without the mess and rubbish was SMUI. All of the UI component libraries that you have suggested here defeat the purpose of component containers... Svelte was designed to do away with the crap that comes with absolutely terrible shit like Tailwind... but you're kinda defeating all of that by stuffing tailwind back in. For Svelte and other zero day frameworks... Tailwind needs to die.
imgoingtowriteanentirefreakingnovelin1linebecauseithinkhittingenterlowersefficiency-wind
it only took me 11 days to realize im stupid. new record
BreakwindCSS 🍑🌪
If we could back in time to change the time branch to write more scss than tailwind