Best UI Library for Svelte
VloĆŸit
- Äas pĆidĂĄn 22. 04. 2023
- Modern Saas Course: hbyt.us/modern-saas
SkeletonUI is an incredible UI toolkit for Svelte. In this video, we go over some of the cool Skeleton features and use them to build a mini application.
SkeletonUI: skeleton.dev
đ Final Source Code: github.com/huntabyte/noted-sk...
If you find my content useful and want to support the channel, consider contributing a coffee â: hbyt.us/coffee
đ Become a channel member: hbyt.us/join
đŹ Discord: hbyt.us/discord
đŠ Twitter: hbyt.us/twitter
đ„ïž Setup Stuff: hbyt.us/gear
đ Topics Covered:
- Svelte UI
- Svelte Components
- Svelte UI Libraries
- Svelte Design
- SkeletonUI
- Tailwind Components
- Skeleton Svelte
Hunter, this is a spectacular intro to the library. Great job covering so much in such a short amount of time!
Thanks, Chris! I tried to highlight the things that set Skeleton apart from the others! Also thanks for maintaining such a great library! đ«Ą
Been using Skeleton since the very beginning. It's amazing! :D
Truly a Fantastic Video Hunter, thanks for making it :)
when's the sorter for table component going to be implemented?
I have been using this for a few months and I'm hoping this gets there as the best library. There are still a few components I need to use it in my projects but some have already been requested. Also been sponsoring a small amount a month to the project. Thanks for making this.
Itâs only going to get better, and youâre very welcome!
Your videos are the #1 resource for sveltekit!
True!
@@Jorge78712 Thank you both!
Looks like a great library and very nice to see not just an overview but actual usage in multiple components which make up a working example. Nice nice nice. Well done!
Thank you!
So excited to use this! Thank you for making these in depth svelte videos.
Youâre very welcome!
Perfect timing! Going to add to my startup this week - thanks Hunter ;)
I just started building something with this so I'm super glad to see you make a video on it! Glad I found your channel!
I'm glad you did as well!
Didn't know that something so powerful existed, I will definitely use it in the future. Thanks for sharing, your channel is gold!
Thank you! And you're very welcome!
Oh yeah, this is the library I was waiting for svelte, thank you for the tutorial! +1 sub
Thank you so much for these videos. I got introduced to Svelte and Sveltekit just because of your videos.
This semester I made my frontend for a project using sveltekit.
Can't thank you enough.
Youâre very welcome! Thanks for taking the time to comment, Iâm glad to hear that!
I wish I had seen this 2 months ago... Now I want to rewrite my project with this. You made it look to easy! Thanks
You're welcome!
Just came across your channel from Reddit - thank you so much for your content. It's amazing!
Thank you!
Thanks for the great content as usual, waiting for the saas course
Skeleton UI looks really great but in the end I pulled it back out because too many of the components had their "opinionation" sort of overriding what I felt I needed to accomplish. I hope everyone gets great use of it. That's not a criticism but just advice for potential adopters, that you ought to have a really thorough look at the implementation details of the components before selecting this for your project.
I agree I cannot stand these opinions =) for me best user interface is accomplished with pure css IF and Only IF SUPREME ELEGANT WILLS
Thanks Hunter - great video, one of your best! I just have to watch it a few more times to take everything in :)
Thanks, Dave! I wasn't sure how the video would be perceived but I'm glad to see everyone is enjoying it! I'll admit this video was a bit fast, I'll slow it down a bit in the next one!
This is super fast but still super easy to understand each part thank you so much
That's great to hear! You're very welcome!
Amazing job for your videos and the team behind Skeleton. It's make my life easier.
Awesome tutorial. Those docs look clean!
Awesome, just the inspiration I needed for an upcoming project.
That's great to hear!
A fantastically detailed look at Skeleton UI. Really helpful while I'm learning Svelte and SvelteKit. Great to see some common patterns of usage which help me to understand SvelteKit best practices. Thanks!
Youâre welcome! Thanks for the kind words!
@@Huntabyte I'm now binge-watching your content. Super helpful as I've not used SvelteKit at all prior to this. Thanks so much for your hard work.
I love your videos about Svelte!
Man this is amazing, I have been using Flowbite svelte for my current project and it's a bit finicky to use. This looks amazing with all that stores feature, I will definitely use Skeleton for my next project!
I am using flowbite svelte so far, what's wrong with it?
Flowbite is pretty powerfull too, been using it. What issues have you been having?
This is sick :D thanks for the video
This is amazing! Great video. đ
Looks AMAZING, gosh. Thanks
Great video! Spent part of yesterday switching one of my projects over to skeleton after watching. Man you were fast talking....I usually watch videos at 1.5x...first time I had to switch to .75 lol
Haha I did talk a bit fast in this video I'll admit, I just try to be conscious of everyones time, I forgot about the option to increase the speed, I'll slow it down a bit in the next ones and you can speed it up if it's too slow :). Thanks Kevin!
Instantly subscribed. You legend!
what a nice tutorial and explaination. Please keep going what you're. it helped me a lot as beginner. TQ.
Glad you came around to Skeleton. Daisy UI is good but Skeleton is better.
Thanks Hunter. You crammed a lot in to this. Very useful.
One observation: I like to pause vids to check I understand any new code thatâs introduced. Because you speed up some parts of your vid (eg. When adding new code) itâs not all that easy to stop the vid at the right moment to check it out. I understand you want to make your vids short and snappy and thatâs great but as I can set playback to 1.25x or 1.5x, if I need to save time, perhaps not speeding through those new code additions might be better for those of us who need to check the code and/or who watch on mobile devices. Desktop is probably easier to control but YT on mobile sucks for frame-by-frame playback. đ
Thanks for the feedback! Noted moving forward!
Another great video, thanks.
Thank you, as always
I'm not a svelte dev, but this is a nice video. Might consider trying it out (svelte with this ui lib).
This is fantastic!
Thanks... and kudos for sharing the code
What a fantastic video. Really well presented
Thank you!
I probably dont need a course now .. but going to buy your course for 2 reasons .. 1st I am sure you will teach something new and interesting 2nd. I want to say thank you for sharing your knowledge :) Having said that .. I would recommend to add 2 more things in the course .. 1st prisma .. I use prisma along with supabase because much easy to manage and update database schema. However I use supabase query due to speed and row level security.. (row level security in prisima is not very clean). 2nd tRPC - I use trpc with sveltekit now.. help me avoid mistakes and write fast code
Can you explain why you are using tRPC? I was looking into it but for me it seemed it will just make it more complicated than just writing your "server-side" code in +server files.
Wow! This is fantastic, thank you for this video! As a Vue dev moving over to Svelte, this video has been great to reinforce what Iâm learning about SvelteKit and showcases an awesome UI library.
I have to ask though - what VS code theme are you using?? It looks great!
What a fenomenal guide, thank you very much for this!
You're welcome!
This is so useful, thank you very much!
I hope to see more videos.
Thank you! There will be more coming soon!
Awesome!
Looking awesome! Re the colors, Iâm pretty sure you can use tailwindâs opacity modifier with hex code colors as well. Thatâs what I do đ€·đ»ââïž
Not if youâre using CSS variables :) why I showed the docs snipped for reference!
very nice, thank you!
Brilliant!
This is AMAZING.
Awesome, so good.
Hunter, gracias por compartir tu tiempo y conocimientos. Si quisiera poder manejar Svelte al mismo nivel que lo haces vos, por donde deberĂa empezar ?, me sorprende como manejas el Local Storage.
Te mando un besito
SkeletonUI is just đ
This is Netflix worthy content, just ... mesmerizing
I'm glad to hear that!
Thank you.
Great video - can you make more like this for Skelton please - Cheers
This is sick!!
i'm a react/nextjs full stack developer realizing how much time I could have saved when I knew about the svelte ecosystem. but hey better late than ever. loving svelte/kit so farđ„đ„
WOW IS AMAZING , PLEASE MORE VIDEOS , THANKS FOR ALL
I will certainly keep them coming!
Quality content. â€
agreed.. after a lot of research skeleton is the best đ
amazing..!!
can you make a video explaining how can you set up theme switch in skeleton like you did for daisy ui... nice video
tried it in 2 projects , and svelte + skeleton are just perfectly combinet to make the code less boilerplaty and more self explanatory without tons of Comments, with a backend like pocketbase that's the perfect setup for starting a project or even a startup
backend rust imo
God I wish I knew about this before choosing a UI library for my project... Settled on SMUI which was a mistake. I wish I could migrate everything in a click lol
Thanks)
You're welcome!
great video!
Thanks, Dominik!
I've always been skeptical about svelte, but this looks ok, I might give it a chance
I was too at first, but try to build your next side project with it and you'll wonder why you waited so long to give it a chance đ
Im sorry if youâve been asked this a hundred times, but I love your browser setup. Could you point me towards what plugins youâre using for your browser (and what browser it is)? Thanks!
I just use Microsoft Edge (since 2022 - no Bing chat bandwagon here đ)
Hi I'm interestedguide explaining in details some features and how they work ( the styling , layout , ...)
Have been using it in all of my projects. Only problem I have is that if you make dark mode look good it usually does not translate that well to light mode. Have to do a lot of manual fine tuning to make it decent.
Have you brought it up to the Skeleton team? I'm sure that's something they'd be interested in fixing if it's truly broke!
The team and I met recently and the theme generation is one of the areas we have the most ideas for improvement. Keep an eye out for that going forward!
@@skeletonlabs That's great to hear! I was a bit reluctant to post this on the discord, because design is subjective after all. That being said I am looking forward to what the team is cooking up. Thank you for your hard work
Wow. I started a React app two weeks ago with Mantine. Been on the edge w Svelte for a bit but felt that the UI libraries were too immature. I think Iâll migrate and use Skeleton!
Check the Popup section.
Let me know how it goes!
Can you transition from from Daisy UI to Skeleton UI or do you have rip out Daisy UI and then go back and add Skeleton UI to your project.
From my understanding you have to rip and replace, as they interfere with one another!
Thanks you man. Is there a similar toolkit for VueJS ?
I'm sure there something of the sorts out there for Vue, but not Skeleton specifically.
I'm wondering how you think Skeleton compares to SvelteUI? It seems that Skeleton is significantly more mature than SvelteUI at the moment, but do you think it will get feature parity eventually? Is it easier to user than Skeleton?
What's that font on your VSCode? So nice
Cascadia Code!
Any similar library for react?
React has been around for a long time, so I'm sure something comparable exists. However, Svelte's native actions and stores are powering some of these easy to use utilities. Give Svelte a shot for your next side project, I'm here to help :)
I prefer not to use AppShell because the scroll bar is applied to the content container rather than the page. This breaks stuff like page up/down keys and mouse scrolling with the cursor over the header and print layout.
Can you also cover flowbite for svelte
That's certainly a possibility, I've used it in a few small projects already. What's cool is that you can bring those Flowbite components to work alongside Skeleton which is super cool.
iâm tired of trying and changing UI libraries, hopefully this one will be the definitive
I hope so too! I'm guilty of that myself tbh., but I think it's naturally to keep trying different ones until you find one that really meets your needs.
while it know its just text, after adding custom theme in the beginning, and i look over source of a simple page file, source is over 6000 lines long, does not seem very efficient
Very nice video. What is your browser?
Edge - since 2022 đ„
@@Huntabyte Thanks
Hey man, great tutorial, thank you! If I may add some critique, Iâd really appreciate if you toned down the fast zooms and pans a little bit. Itâs often quite disorienting and sometimes the cuts / zoom transitions to another space on the screen are so fast that itâs hard to see what you actually did and where you pasted or wrote things. Just showing the VS Code window at a nice readable text size is more than enough most of the time. Thanks :)
Noted â I'll admit this one was a bit much due to the fast-paced nature of the video. I always try to ensure everyone can see what I'm doing, even on small screens! Thank you for the feedback!
@@Huntabyte One more suggestion that would add tremendous value is creating 'chapters' or at least an index of times and topics. There's so much to grok here that I will go over it several times and, no doubt, use this video as a reference for some time to come.
Kudos, and thanks for the wonderful content!
P.S. Really exxcited for your course. I signed up to be notified! đ
@@Huntabyte Yeah, I definitely noticed and appreciate that! Iâm usually watching on a 13" screen myself, so thank you for that! I think especially the transitions are what makes it nauseating at times. Maybe just slowing them down a bit or letting the cuts stay for half a second longer might already make a big difference. Itâs always a fine line between showing everything and having things large enough, I totally get it
I wish i could the code you used. You just glance over it
I have recently started using this library. Is this the best svelte library??
I believe so!
@@Huntabyte Thanks bro.
@@Huntabyte I have noticed when developing, the page takes longer to reload when I have a component from Skeleton Ui in the application, is there any way to fix it?
@@Huntabyte Is it possible to use skeleton and daisy ui in the same svelte-kit project?
Iâm never sure how much time an opinionated UI component framework really saves? If I have already built a system for previous projects, I can reuse my own components and add to my set-up with each new thing I need to build for a new project.
I think itâs probably worth building a few projects with Vanilla SvelteKit, to learn about the tooling svelte offers out of the box, before adding in an extra library of stuff that may not be necessary. Iâve tried a few UI frameworks with React and got fed up with having to learn the quirks of the framework rather than finding it sped up my workflow. Thatâs why I switched to Svelte and SvelteKit in the first place.
How long does it take to feel comfortable using Skeleton and are there situations where you get frustrated with not being able to do what you want as easily as you thought?
Absolutely agree with this - I think it all depends on the individual and what they value. One point I will bring up which leans in favor of UI libs (given they get it right) is accessibility out of the box.
Do you use Skeleton UI in your Modern Saas course?
Try adapting TailwindUI without Headless UI support...
Thereâs a svelte headless-ui by captain code man that is really solid and works well with tailwind UI!
@@Huntabyte Isn't maintained. Multiselect combobox is not an option. Switch and Tab components are not working. Ugh... Svelte is a love hate relation...
Nice video! It's just that you are speaking a little bit fast. đ
I'll try to slow it down a bit, sorry!
@@Huntabyte I had to pause and rewind the video most of the time. It takes time for a non-native speaker like me to follow. đ
@@leelonghui I got you! My bad!
@@Huntabyte I found the speaking speed just about right. Considering the video speed is adjustable I wouldn't worry about the speed of speech, but what would be very useful for me is to have about half a second of pause between screen changes. That would make it easier to stop the video and study the code.
I want this tech to make mobile apps đą
I think skeleton is a great project and I applaud the effort. Unfortunately the radius and white space choices of the default themes are - urgh.
I don't want this to come across too negative or ungrateful - but I really wish the themes were closer to the level of tailwindui.
I hope this can all be fixed in a custom theme.
I tried it, but i think i am too stupid, because i can't make stuff work.
I switched from skeleton to flowbite svelte, I always feel the theme of skeleton is kinda not that good
Then you need to do a better job customizing it lol
@@Huntabyte itâs really weird that people went out of their way to have the default theme as far away from sane defaults as possible. Figuring how to get it back to normal is not something I want to start my evaluation of UI lib with. Iâll be trying yesvelte instead.
Too few UI components :( Look ad Quasar or PrimeVue, the huge difference
Based edge vertical tab user. But you can also remove that ugly title bar, too, just sayin
Wish it didn't use tailwind
To be honest a UI library without all the inputs and especially Datepicker is kind of useless. Like, here's a library where things look like this, but hey, if you need a simple date input in your app then you have to make your own control and make it look like this. In my opinion, you start with the inputs, then you add everything else.
You could make that same argument about any component that you think is important that I do not. It also just hit 1.0 so Iâm sure a date picker is something on the horizon.
â@@Huntabyte Don't get me wrong, it's a nice library, but when I'm developing an actual app, I need the inputs, I need the popovers. Most Svelte UI libraries lack these basic things, it's not just SkeletonUI. Part of why I've been doing React + Mantine for a long time.
If you're doing an app and you don't need a date input, or even a good number input or hell, even a checkbox, then go ahead and use this.
But really, I wouldn't call any npm package that does not have all inputs a proper UI library. Looking forward to their new stuff though.
I agree. I looked at using it but itâs currently missing so much that Iâd have to roll my own components anyway. What it does have is cool but mainly basic ui components. Maybe by version 2 but they need to iterate faster while they have 1.0 publicity.
â@@algo-wave agree that the date picker would be cool, but I don't understand your comment about the number input or checkbox. Those are basic HTML elements that look fine in Skeleton and are easily customized with Tailwind. Can you explain?
@@riziles For checkbox sure, it's simple. But a number input usually isn't just input type number, the best experience is with maximum precision, only able to type numbers. Usually you take a text input and modify it. I had to do this recently and it wasn't too difficult, but it's just something these UI libraries don't provide. Again, imo get the inputs done, then start doing badges and dots and whatever crap you wanna put in there to impress me that I could've done with 3 css classes anyway.
I like the video, but man you are going way to fast!
Things like this just further disconnects people from how the actual css/svelte works. I mean app shell for the simple route? Componentizing the built in routes is just lol. And the name, its not skeleton, its full on chunky boi.
I setup the AppShell to show how one might set it up. I donât agree with your opinion but youâre entitled to it :)
don't see the value in this
Best UI Library = None
In my opinion the current skeloton doesn't look professional. It looks a bit more like playground. Sorry for it but that is only my opinion...
Itâs got a unique style for its own brand but you can make it look however you want.
This library is ugly out of the box, and dropdowns and models are pain in the neck. Theming is also confusing.
UI library with tailwind is like the worst of both worlds. You get bloated html from your tailwind and also constraints from the ui library.
If you are writing a UI library that would be used in hundreds of projects wouldn't it be worth it to write proper optimized css?
Pretty sure the idea is to hitch a ride along a massively popular css library (tailwind) in order to convince more devs to use it in their projects.
I prefer tailwind, so it's nice to be able to customize my UI lib with tailwind as well. It's not for everyone, and that's perfectly okay!
i tried it, this is the worst UI one can use!