I Tried Every Svelte UI Library
HTML-код
- Опубликовано: 9 июн 2024
- List of Svelte UI libraries.
🔴 Patreon: / joyofcode
𝕏 Twitter: / joyofcodedev
💬 Discord: / discord
🔥 Uses: www.joyofcode.xyz/uses
🔗 Svelte UI Libraries: joyofcode.xyz/svelte-ui-libra...
🔖 Timestamps
0:00 Intro
0:37 Melt UI
4:49 Bits UI
7:55 Skeleton UI
9:45 Flowbite Svelte
11:13 shadcn-svelte
13:37 Material Design
14:40 Framework Agnostic
17:36 Honorable Mentions
20:42 Outro
#joyofcode #sveltekit #svelte
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.
Quality stuff as always, always lookin gforward to your next video :)
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!! 👍🏼💪🏼
That Shadcn - ShadCDN confusion hit right home for me
I would love a dedicated video on Melt and how you can bring your own stores and the best practices for state management
Thanks for taking the time to break all of this down. It would be fantastiawesome if you could do a video on MeltUI
cool channel, thanks for putting in the work to save me time hunting down options for my next svelte project!
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.
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.
great overview! thank you🤠
Yessssss please make a seperate video on how to build our own components using MELT UI
melt looks amazing 👌🏼
Would love to see a video on bits and melt!
Yes please a detailed video about MeltUI 🥰
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.
Hi, nice video, learned quite a bit about Svelte UI libraries. I have one question: What browser en tab extension are you using?
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.
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
PaperCSS components for Svelte, is also an awesome ui library with an paper drawn look.
thanks, didn't know about papercss!
Super insightful as ever! Is there a CSS version of shadcn-svelte or are we basically looking at Bits-UI. Thanks again
no
I didn't realize there was that many. Pretty cool Rundown.
melt ui is really amazing , like really well done ,
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.
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?
Yes Please do a video of Melt UI
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 would love to see a video about the Melt UI
Great, thanx for the collection. What about the performance of these Libraries?
You don't have to think about it.
Shadcn-svelte is based on melt UI, i have to say that if you need quick components it's the most complete library
Lovely ❤
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.
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
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.
DaisyUI is awesome!
Man Huntabyte is a beast
🔥🔥🔥
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 love Melt UI, Bits UI, Shadcn Svelteee a lottttt
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.
Can you showcase Melt UI in it's own video please?
Everything I wanted to use still V.0 and not ready for production…😢
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.
Can we use DaisyUi with Melt-ui? 🤔🤔🔥🔥
yes, I personally use melt-ui with skeleton-ui
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
What is your browser? Arc?
I use Brave.
i love that this comments section is just wholesome nerds being excited about the things all the other nerds made 😊
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 .
came here after, "guys how cool is this"
I would like to see you talk on carbon-svelte
He said: ruclips.net/video/qyG-xWjNZKU/видео.htmlsi=FegNOs-p_NrRPUbT 😂
If you don't have anything to say about Carbon, why is it on the Honorable mentions?
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
Something about most of the svelte ui libraries having almost identical websites makes me not want to use them
we need a tutorial on how to crop image and send it to form action maybe svelte-easy-crop tutorials 😢😢
The amount of work required is acceptable for me only in either Pico or Skeleton.
The Select for Skeleton was under Tailwind > Forms. I was expecting you actually trying them and showing on the video itself how complicate the setup for each of them was. I notice when using for example Skeleton that it requires a lot of steps to add to a project. Too bad you didn't go this way, as it would make the video more interesting, many libraries look great, but sometimes their installation are pure pain.
skeleton works for me.
The winner is: bits ui + pico css
Dedicated video for Melt please 😊
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
what do you use ?
I use Melt UI.
bro teach me new svelte 5
After the release! 😄
this is a super useful video thank you!
i actually don't think carbon looks that bad ahah ^^;;
ez pz
That's pity that their code isn't in Svelte 5 yet
Whoever smelte it, delt it
imgoingtowriteanentirefreakingnovelin1linebecauseithinkhittingenterlowersefficiency-wind
it only took me 11 days to realize im stupid. new record
And they all suck
All based on the clutter of tailwind "CSS". Dozens of tags for a simple button. Stupid to see this dumb concept being perpetuated...
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.
BreakwindCSS 🍑🌪
If we could back in time to change the time branch to write more scss than tailwind