Svelte UI Libraries Have Leveled Up
2024 ж. 9 Қаң.
50 735 Рет қаралды
In this video, we'll go over Melt UI, Bits UI, and shadcn-svelte. We'll talk about what makes each unique, and which one you should choose based on your preferences!
Melt UI
github.com/melt-ui/melt-ui
melt-ui.com
Bits UI
github.com/huntabyte/bits-ui
bits-ui.com
shadcn-svelte
github.com/huntabyte/shadcn-s...
shadcn-svelte.com
🚀 Modern SaaS Course: hbyt.us/modern-saas
💬 Discord: hbyt.us/discord
🐦 X/Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
- Svelte UI Libraries
- Svelte headless components
- Melt UI
- shadcn svelte
- Bits UI
- Svelte components
- Svelte component library
- Svelte headless
- Svelte tailwind library
To clarify, Melt UI was created by Thomas Lopes ( twitter.com/thomasglopes ). I started helping early on and have been helping him build it out ever since, but want to ensure I give him the credit he deserves for contriving such a masterpiece ⭐
the link has ) at the end, you might want to add a space at the end of the link
And what a *huge* help you've been! Cheers 🍻
I have been using shadcn-svelte in all of my recent projects. I love svelte but the one place where React wins is developer ecosystem and shadcn-ui. Having shadcn-svelte available has allowed me to ship projects very quickly that look and feel great to use. When shadncn-ui launched new components at the end of 2023, I was shocked to see how quickly they were implemented and added to shadcn-svelte. Thank you and all the contributors for the work you do to make the svelte ecosystem so great ❤
Damn ive limiting myself to skeleton?? Shld i try out ur recommendation
@@jaycool-lb9kjI also am using skeleton and feel like I made a bad decision in the long run. I have tried other libraries though. But shadcn looks very appealing.
Great job Hunter, Thomas, and everyone else involved. Melt, Bits, and the Shadcn-Svelte project have been growing by leaps and bound! Always glad to see more great options in the Svelte UI space. Keep up the good work folks! 🤜🤛
Great to see you're not butthurt with competition. Your UI is great!
@@alexandrecosta2567 Chris has been great from the get-go. Ever since I started, with Radix Svelte, he reached out and has been super welcoming, never seeing it as competition, but instead as something that adds to the whole community, which in the end, it's what OSS is all about!
The entire Skeleton team is incredible, and I've learned a ton about managing projects, expectations, and more from Chris & Adrian from Skeleton ❤ you guys rock and I can't wait to see what Svelte 5 unlocks for you all!
@@alexandrecosta2567 One of the core maintainers of Skeleton (Adrian/CokaKoala) also maintains shadcn-svelte, bits UI, Melt UI's preprocessor, and helps me out with a ton of other projects. We're a close group ❤
Sua biblioteca é muito bonita, ainda está longe de todo seu potencial, mas é bom o suficiente para eu usar em meu próximo projeto, que se der certo, ficarei feliz em fazer alguma colaboração.
This is so good! Clever how the layers of abstraction are built up melt-ui -> bits -> shadcn. Styles out of the box or dropdown to unstyled, or drop down to decomposed builder.
I’ve been on vacation lately but I’m back on my grind and appreciate you posting these videos! Using this tech for my future SaaS
Thanks to you guys, svelte is becoming more and more mature. I can't say thank you enough for your great works.❤ i hope someday to reach your level of knowledge and ability to be able to contribute
Thanks for the overview video. I would love a deeper dive video that you mentioned at the end.
Looks pretty decent. I'm using all my own components that I've built over the past 4 years using Svelte, because when I started things like this didn't really exist yet, and tbh building from scratch helped me learn a lot even though it took time. If I was just starting out now, I'd probably use this instead to get started. Great work.
You guys are doing a great work, your libraries facilitated me to choose sveltekit for my latest saas instead of react
Wow that's a significant improvement in the Svelte UI library. I'll use it on my next project.
Really awesome UI library, been using it for developing my own SaaS. Great results!
Thanks a lot for the clarification, which lib I will try out on my next project. And please make a deep dive video about MeltUI 😃
I was just in the process of rebuilding an internal application, the timing of this UI library is just perfect. Thanks for all your efforts
kudos to u and ur team hunter, melt UI has come so far
Amazing job Hunter and all the community!!
Amazing what you’re doing for the Svelte community.👏🏼
excellent material, it really clarified everything you should include a link, and hopefully a written version, to melt, bits and shadcn-svelte. moreover, it would be great that you could show how to implement a custom design from figma customizing shadcn-svelte, that would be the most common use case I guess...
Thanks for your amazing contributions! Even though I'm a designer learning svelte, I've found following the examples on shadcn a great help in learning. Greatly appreciate you and your svelte content!
Would love to contribute to some more example screens and groupings of components down the track!
Awesome work mate, thanks for your contribution to the Svelte environment
My pleasure!
Awesome work love the customizations
This is everything I've wanted in CS libraries. The perfect separation of control and flexibility at each level with each library building on the ones below it. So beautiful
Really appreciate your work on this mate
this looks awesome! I'll test out melt in my next side hustle project :)
I've been using shadcn svelte for a while now and i absolutely love it. Had to write a Project and Nextjs and picked shadcn as UI Components. Since my main Framework is SvelteKit i was really happy to see that there was already a Port. Also how quick you implemented the new Components (Sonner, Drawer, etc) is insane. Thank you for that amazing work!
You're welcome! I've had a blast doing it!
I'm glad Radix has had such a positive influence on how new component libraries for other frameworks are built (Kobalt for Solid, Melt for Svelte). It's truly the best way (yet) to consume components that provide consistent accessibility and functionality without default styling.
Great job! Thanks for this. The only reason I still haven’t fully embraced Svelte is the absence of robust UI libraries. Definitely gonna build something with this! 🙌
Awesome Hunta. I will try my best to learn and contribute to these awesome lib
amazing work hunter!
Bro, you're a legend! Thank you so much for making these
My pleasure!
Man! As a developer I'm just a toddler and I understand barely 10% of what you presented here but I will get there one day. One sveltery at a time. Meanwhile thank you. Thank you and all the svelte community
Melt ui looks great. I should start using it.
You’re a legend and a big asset to the awesome Svelte community. Thank you for all you do!
Thanks for the kind words!
You are an inspiration ! We need an updated firebase or supabase course for sveltekit 2 / svelte 5 🤞
Yes please!
Brother I am stunned by this presentation. I was looking for a UI library for Svelte and Melt seems to be the result of the work of people who know what they are doing.
Thank you! 🙏🏻
Let's f***ing goooooooooooooooooo!! This is SO cool man, I'm so hyped! When do you think Melt UI 1.0 will be available? Would you recommend building something for production with any of the 3?
Ideally soon. We want to release 1.0 before Svelte 5 is released so that major v2 will introduce Svelte 5 support, rather than having to make it a part of v1 with a divided ecosystem.
That's great thank you!
Best things to happen to the Svelte ecosystem! I'm incredibly happy we have these libraries now. It makes UIs so much faster to build.
Cant thank you enough for this❤
Omg thanks, this is a game changer!
Well done you guys! I however don't like any of these, so I'll stick to what I've been doing
What have you been doing?
Amazing work 😮!
Thank you! Cheers!
This is awesome!
Nice job
Great work! What browser are you using in this video?
Arc!
I love all these new UI libs bro, but I see some charts and graphs, would like to know which lib are you using for those charts... because they are lit
I'm using `unovis`! You can snoop around the source code to see how they work, they are pretty decent from my limited use of them!
You single handedly carries the Svelte ecosystem ❤
I appreciate the kind words, but there are a lot of people who contribute to these projects and they wouldn't be close to where they are today without them ❤️ Even those who take the time to open issues and report bugs is a massive help!
Love ShadcnSvelte! Been using it since the day you announced it on KZhead. Love the full flexibility if offers. However, the docs could use a bit more details under each component, especially there's almost 0 information about events. For example, the slider component - i know i can bind the value to a variable, but i can't seem to figure out a way to get events like on:change etc to work.
We actually don't dispatch an `on:change` for the slider but there is an open issue to add that feature. The docs for those events would fall under bits, which I'm actively looking for help in bringing up to speed!
awesome 🎉
Hello! Have you heard of the DHTMLX component library? This is a JS library, but you can integrate it with svelte and other frameworks. The advantage of the library is that you don't need to write html wrappers, just attach widget in one div
I haven’t heard of that!
love these, my only problem is tailwind; I'm still trying to come around to it
It grows on you :)
Go hunta
Is shadcn-svelte going to build out docs for how to replicate the 'mail' example on the shadcn/ui website? I am looking for a UI library for svelte that has an extendible sidebar component. The mail example is exactly what im looking for, im new to coding so not sure how i'd do this from scratch :)
Lmao. Shadcn-svelte is idk like almost illegal how good it is man, so thanks for all the work. Also a stupid question.. can we use shadcn-svelte without typescript?
Using it without typescript is on the roadmap 🫡
Regarding your question near the end of the video - I would really appreciate a Melt UI guide since with more granular control come more possibilities for making life harder for yourself.
Noted!
What about flowbite-svelte? I was thinking of using it in my next project, how does it measure up to the others?
I'll give shadcn a try. I just want something like Element Plus from Vue where you don't have to use any CSS classes to make it work and look great.
Awesome work on all libraries, but isn't most of this work going to become quickly obsolete when we switch to Svelte 5? Sure there's the Svelte 4 compatibility, so it'll all still _work_ but it would mean you can't use the new Svelte 5 syntax if you also want to use Svelte stores Melt exposes right?
Those stores will likely become reactive objects 😃, which makes it even more powerful!
It would be good if you would make a video with shadcn-svelte. I tried it, but I found the custom themes confusing. The website has orange theme, but there was no orange option while selecting from the CLI. I would suggest a video with a basic application (pokedex or something), where you show how to create a custom theme and apply it on the project
Amazing 💪🏾💪🏾💪🏾💪🏾💪🏾💪🏾💪🏾
I think Melt is awesome, especially for the complete customization it provides. Indeed, I don't understand why svelte doesn't provide something similar out of the box, because at the end of the day, you are writing custom components which behave as standard ones with custom styles and usually with terrible accessibility
Deepdive would be awesome please :)
I would love to see a breakdown/walkthrough on the architecture and process of building these UI libraries. What is the process from start to finish.
It is awesome! 👏 But do they work in Svelte 5?🤔
and of course Bits UI already works with projects on Svelte 5. I don't want anybody to mislead ;)
They _should_ but won’t have guaranteed support until it’s stable :)
shadcn will work soon with svelte 5?
yeah make a deeper dive on shadcn
hey what browser are u using? is it arc?
Yes
Hello i'm to learning svelte do you advice me to build from scratch and learn the framework deeply or speend the process by using such library thank you for your work ❤
Might be a dumb question, but what is the need for a ui component library? Is it for people who come from the react way of doing things? Wont any ui library available for vanilla JavaScript work in svelte? For example bootstrap?
No, its not for people who come from the react way of doing things. Components are in every framework for good reason, you get to offload the burden of maintaining intricate UI tests, accessibility research and functionality, etc.
I have tried doing forms with Shadcn-svelte, using the Super Forms, but i’ve found it very difficult doing anything else but a very standard form action. For example, i want to update a record in a database, i want to send the id along with the form, but setting initial values on the form and send additional data on the form has not been possible. Seems not very mature for me when some of these basic things do not work… or maybe i am wrong?
Not sure if you saw the “Preview” label beside the forms in the docs, which essentially means “Not Mature”, “Experimental”, “Still working out the details”. You can use the regular non-Form.X elements and accomplish what you need to accomplish.
@@Huntabyte I had not noticed the Preview tag on the form, sorry. And when you say non-Form.X elements, you probably mean e.g. the ... element? I'll try have a look at this again, only with the regular components. Dont get me wrong, apart from the Forms (which are in Preview, totally fair!), this library has worked flawlessly and very easy to use! Thank you for your contribution!
honestly while i like the idea of svelte kit ui libraries every time i use one, i always just end up making my own components specific for my website, im still a newb but i just dislike how many options i have to learn and then figure what and how to implement the component when i can just make my own and add "enough" reusability without bogging down or getting confused about whats what. Then again Im still new at this so maybe ill change my mind in the future
daaaaaaamn boy!
So where do you stand on Skeleton UI now?
how does one get involved to become a contributor for these libraries? i had my eyes in shadcn svelte, gotta be honest it really looks good for the react world I am confident it can be even better for svelte
Hang out in the issues, look for ones with `help wanted`, find bugs, help others in the community via discord, there are lots of ways!
how does shadcn-svelte compare with skeleton?
It's quite different, and whether the differences are good or bad is really up to you to determine. The first thing I want to mention is that these components can be used with SkeletonUI if you want to. This library is not meant to be a replacement for SkeletonUI and is meant for someone who wants more control and ownership of their components, which is not everyone. By taking control, you lose the ease of running `pnpm update` to get the latest stylistic updates, you strictly get the latest version of bits, which may fix bugs, add new functionality, etc. but as far as the styles go, it's up to you to update them. Skeleton is way ahead in terms of development, maturity, and overall support/maintenance, and is at a stable release, meaning you can be confident there aren't going to be breaking changes introduced until the next major, whereas bits/melt are still
@@Huntabyte thanks for the extensive answer!
Will this be modified for svelte 5?
You bet!
One day, sveltkit will be on top.
What is this browser you are using?
Arc!
Melt, bits and shad look nice from outside, but I think something like SkeletonUI and DaisyUI hit the spot better for me personally. That's a lot of opinionated philosophies you have to buy in just for an ui component library. Having 3 different projects just to get 1 complete library is a bit of a hard sell to my colleagues, for example, where am I supposed to open a ticket if there's some bug in shad? It sounds obvious, shad, but the ticket will probably have to go around a bit through all 3 projects. Anyway, youtube comment section is really no the place for this type of talk. Maybe I'm wrong, and it will turn out to become something as big as Vuetify with a lot of support and options. The action based approach is indeed unique, that alone could make melt popular enough, but idk about the other 2 projects. Good luck, cheering for you!
Thanks for that! And you’d be correct about the bug scenario. However, we maintain the full stack, so it’s a bit different than if we were depending on another package we didn’t have ownership of. I’m able to identify within a couple minutes if something is related to shadcn, bits, or melt, and quickly reroute the ticket and (ideally) fix the issue! Regardless, I appreciate your opinion and agree that Skeleton UI is a great project! I always recommend it to peeps who have the same concerns you have!
what browser setup is that bro
Arc!
Hello sir hunt. Can you make a sveltekit captcha for svelte/sveltekit :3
please compare them with Skeleton UI by your opinion❤❤
it would be good if it is like skeleton ui this chadcn so good but so exhausting to implement
Different strokes for different folks!
@@Huntabyte After using it for a week it is not bad at all. I primary using it from now on. Love it ! that bind:open in everycomponent is the best exp!
Shadcn htmx when ??
you are the first person i've seen that unironically uses Arc
I’m not sure if this is an insult or a compliment, but either way, I’ll take it! 🫡
Shadcn vs skeleton???
I get what a headless UI component is but I hate that its another one of those terms that doesnt make sense when you break it down. Typically headless means zero UI so its a bit like saying "serverless" when the server is still being used. Seems to me they are actually just unopponated in their aesthetics and not headless as the end result of using them will still be a visible UI.
whats a test
🤷🏻♂️
I love you man (not in the gay like way). ❤
Slightly though, init.
Don’t you mean caught up?
Isn't using aria by default a bad thing? "The first rule of ARIA use is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.""
It doesn’t say anywhere in that quote that it’s a bad thing. Native HTML elements while great are limiting and inconsistent across browsers and platforms. There’s a reason W3C Aria Patterns exist 👍
I really didn't like Melt UI. Svelte should be user-friendly with shorter lines of code than other frameworks, but Melt UI is the total opposite - so complex with incomplete documentation.
Then Melt-UI is too low level for you, go up the stack and use bits or shad. Its like complaining that you don't like wasm because JavaScript should be readable.
Huntabyte ... Hunter biden fan?
I hate everything about this.
Thanks for the insight!
baller