Best UI Library for Svelte
HTML-код
- Опубликовано: 7 сен 2024
- Modern Saas Course: hbyt.us/modern...
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/hun...
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!
It’s so amazing 🤭
Your videos are the #1 resource for sveltekit!
True!
@@Jorge78712 Thank you both!
This is so cool. Thank you Hunter for the amazing Demo. Definitely know what I'll be using to build my blog website now.
So excited to use this! Thank you for making these in depth svelte videos.
You’re very welcome!
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!
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!
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!
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!
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!
Just came across your channel from Reddit - thank you so much for your content. It's amazing!
Thank you!
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?
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!
@@Huntabyte I personally loved the speed, I think its truly the only way to get through this much of a library as possible
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.
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!
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
Glad you came around to Skeleton. Daisy UI is good but Skeleton is better.
I'm not a svelte dev, but this is a nice video. Might consider trying it out (svelte with this ui lib).
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. 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!
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!
Perfect timing! Going to add to my startup this week - thanks Hunter ;)
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🔥🔥
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.
what a nice tutorial and explaination. Please keep going what you're. it helped me a lot as beginner. TQ.
Oh yeah, this is the library I was waiting for svelte, thank you for the tutorial! +1 sub
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
This is so useful, thank you very much!
I hope to see more videos.
Thank you! There will be more coming soon!
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 😂)
I love your videos about Svelte!
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
Amazing job for your videos and the team behind Skeleton. It's make my life easier.
This is sick :D thanks for the video
This is Netflix worthy content, just ... mesmerizing
I'm glad to hear that!
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!
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!
Instantly subscribed. You legend!
Thank you, as always
This is amazing! Great video. 😊
WOW IS AMAZING , PLEASE MORE VIDEOS , THANKS FOR ALL
I will certainly keep them coming!
What a fantastic video. Really well presented
Thank you!
Thanks for the great content as usual, waiting for the saas course
Another great video, thanks.
agreed.. after a lot of research skeleton is the best 👌
This is fantastic!
What a fenomenal guide, thank you very much for this!
You're welcome!
Awesome tutorial. Those docs look clean!
Awesome!
Thanks... and kudos for sharing the code
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 😎
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!
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
Looks AMAZING, gosh. Thanks
SkeletonUI is just 👌
Thank you.
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.
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.
very nice, thank you!
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
Great video - can you make more like this for Skelton please - Cheers
can you make a video explaining how can you set up theme switch in skeleton like you did for daisy ui... nice video
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?
Hi I'm interestedguide explaining in details some features and how they work ( the styling , layout , ...)
This is sick!!
amazing..!!
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?
Thanks)
You're welcome!
This is AMAZING.
Quality content. ❤
Awesome, so good.
Brilliant!
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.
great video!
Thanks, Dominik!
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
I wish i could the code you used. You just glance over it
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.
Do you use Skeleton UI in your Modern Saas course?
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!
Very nice video. What is your browser?
Edge - since 2022 🔥
@@Huntabyte Thanks
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.
What's that font on your VSCode? So nice
Cascadia Code!
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.
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.
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...
I want this tech to make mobile apps 😢
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 :)
Too few UI components :( Look ad Quasar or PrimeVue, the huge difference
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.
I tried it, but i think i am too stupid, because i can't make stuff work.
Based edge vertical tab user. But you can also remove that ugly title bar, too, just sayin
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.
Wish it didn't use tailwind
I like the video, but man you are going way to fast!
don't see the value in this
This library is ugly out of the box, and dropdowns and models are pain in the neck. Theming is also confusing.
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.
Best UI Library = None
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 :)
i tried it, this is the worst UI one can use!