What Svelte UI Library Should You Use?

hey friends let's talk about the state of UI component libraries in swelt so the main criteria for this list is if the UI component library is in active development then GitHub Stars team ability and Etc and if some of the libraries you know aren't on this list is basically because most of them are abandoned so for example swelt 8 it has 25 000 views this was updated last time two years ago same with this Library let's see smell the same story two three years ago MDB swelled to three years ago abandoned and you're going to notice this pattern with all of these libraries where is another one swelled material fi this was abandoned also but yeah let's see what's left only the strongest will survive right and if you have any other suggestions please leave them in the comments okay so let's start with something that I would honestly prefer and this is swellheadless UI and basically instead of having a pre-made component with Styles you just get the logic let's say list box if you were to implement a list box yourself this would be really tedious to do because you have to follow follow the accessibility guidelines and Etc and these are notoriously hard to style yourself so basically the role of something like headless UI is to just give you the logic like this and you could just build the pieces like Lego blocks you can just do it like regular components so this is honestly what I prefer the most and this is based on the Tailwind headless UI but you don't need Tailwind for this you can use it without tailing it comes with animations and other things you can see how to style it and this is really cool but one downside of this unfortunately is the author they seem to have disappeared so I don't know exactly what the state of this library is I mean open source is hard right then people have their own lives but it would be really nice if the person just communicated what is going on with the project because for example someone says hey is this project active and there is literally never any answer from the offer that would be really nice to know what's going on with this project maybe someone can Fork it Etc because I think this is really awesome to have a headless UI library for swelt but yeah basically this is really awesome and I've been using it for Joy of code and I had no problems with this it works great so you have a dialogue here looks also very nice from these Styles you don't get Styles right so you have to do this yourself where you can look at the examples and this is probably a downside if you want Styles because this can get to be a lot of work for example if I go to switch if you want to use a custom label like uh the code explodes a bit and maybe the UI framer should do more of the work for you but that really depends on you so just so you know with headless UI check it out it's really awesome I hope the offer returns because the community really seems eager to work on this project here make it successful but yeah let's talk about material there's a couple of swelled material UI component libraries I already showed you and the only one that remain is this self-material UI and to be honest with you this even looks like the best component library for swelt if you can style it yourself which you can of course but the problem to me is that ever since Google announced material I honestly hate material it's flat boring and clinical and it's a really ugly design system in my opinion and please avoid using material if you can but of course if you're doing your backend or something and using material right no one cares right this of course really isn't nothing against this component Library Etc because it's just using the design system but yeah this is honestly great one we think though is that that for everything you have so for example button you have to install a separate component which is weird to me maybe they're doing it because of tree checking but I don't know isn't there a better way to do this for example you have to go into your terminal now you have to type self material UI button and Etc but yeah let's maybe rent for another time and of course radio button let's see switch again you have to install the switch which is ah but the components look great of course for material design at least and it's feature complete it's one of the older project let's look so yeah thousand comments wow this person is dedicated and of course the contributors saw props to them nothing against this Library I just can't stand material design myself but if there's something you're interested in go ahead all right so here is another one so here is a carbon components for sale and this is based on the IBM design system and this one is more of a work in progress in medium version 1.0 so I'm really not going to critique it harshly but it's a bit limiting you can say gray and Etc white and dark mode so have Dynamic theming and it's really like weird how you import this over CSS but it has a lot of good components so it has a button like this and design is of course subjective it's really not the best but it's really not bad either you can also team it but theming is also weird so for example let me just go here I think here it is Steam and then you have to do this weird thing you have to yeah custom team and you have to pass it tokens or Etc this is one of my biggest gripe with all of these uoi component libraries please for the love of God just use CSS variables some of them are old like one year or two and there's really no excuse one of my biggest pet pairs that they use either configuration over JavaScript or SAS but why when they're CSS variables which is way easier so please if you're the next person is going to work on a UI library for swell please just use CSS variables and use the web platform but yeah this honestly isn't a bad choice but maybe it's not ready yet you can see the toggle dark mode it looks okay so let's talk about your component libraries based on Tailwind CSS and this might be the reason of joy for someone and the reason of hate for others they don't like telling because honestly what I think is going to happen since this tail in CSS libraries are so much better than everything else out there I think what's going to happen over the years is that you're going to see most of swelled and selkid examples in Tailwind CSS just because the tool in the round is so much better because something like skeleton UI which I'm going to talk about in a second is like light years ahead of everything else to be honest and people are always going to gravitate towards something that's easier to use so I really hope we get a regular CSS UI component framework that's going to be the champion and it's going to do it the sweld way quote and quote because it can be really simple if you just leverage the web platform use CSS variables and not all of these convoluted things which we're going to talk more about trust me I have rents for this for days so this is Daisy AI That's more framework agnostic and based on Tailwind CSS so you can just get to the components you can get alert are both Avatar Etc really nothing much to talk about this UI is great if you need a framework agnostic solution but let's talk about more about cell specific solution so besides Daisy UI you have flow byte which is also not released so Flow by swelt also gives you a components based on tailgates you accordion alert Avatar block wall backgrounds and Etc and you can see the components here see button you know here's the import the button you can see the styling looks alright to me you also have cards and yeah there's really not much to talk about if you hate television then you're probably not going to like this yet let's talk about one of the upcoming Frameworks that seems to be doing the most innovation in this space recently and that skeleton UI skeleton UI looks really awesome and I'm really excited to use this when I'm using tailwind and I know even some of the people who work on skeleton watch my videos so hello and I also have some criticism you're not Scott free but it's mostly positive don't worry so get started this is really awesome you can get up and running in seconds you just install skeleton set up television CSS really easy using cell Ted then it has teams so your skeleton team is watching one of my pet peeves I have is with forms for example let's see forms preview elements and of course this is a work in progress I'm going to be too harsh but please for the check boxes don't make them round they shouldn't look like radio buttons so please yeah don't get me wrong I love round conversion myself but checkboxing shouldn't look like radio buttons so that's really weird and there's really a lot of problems with the themes and contrast so for example this is fine but even this green theme is starting to be hard to read and when you get to other teams this is probably not passing the contrast check when you go to this theme this is barely probably passing the contract check and then there's some cool team C form they all have problems with the text in the background this is definitely not passing the test so let me just see Sahara and this is not picking apart skeleton CSS this is just something I noticed this one looks good Nouveau yeah this one also definitely suffers from this and creams on this one is all right but they are really skeletal and UI I'm really excited for the release and team seems to be doing good work and good job everyone alright so let's look at some other UI component libraries the first one is going to be swelt UI this is something that I don't understand so let me just see okay their dark mode is weird so this is in beta so not going to be too critical but what I don't understand about these libraries is when you look at something like this you immediately understand this person is coming from a react background because let's see installation kit next steps learn the basics let me just go here so just like all of these things up front you have to understand for whatever reason it's really convoluted but it's actually a decent UI Library so this is what I don't understand this is very react to me why is there a need for this weird rapper right it's probably a customer side rendering or something I don't understand because when I remove it it works fine so that's probably it but here's what I'm talking about why are we using JavaScript to pass theming options and Etc we can just use the web platform and CSS variables so this really reminds me of something like react which honestly I don't mind if I'm using react I know I mean react land and I know what I can expect but when I'm using soiled I expect something way simpler and this really doesn't have that swell Spirit to me yeah the barrier to entry for this is very high so this is this weird provider so you're passing a team or whatever at least this type so let's see General concept the way forwarding teaches you about some use of cell Concepts like action this is really great bindings classes and then we can look at the components so you have the app shell here familiar with this you have grid if you want to use that here's how a basic button looks like really great looking Library great documentation I love this part though also you have also a burger component yeah so you have a card if you want that and basically that's it I think it's based on a design let's see includes more I think it's based on mounting or something I don't remember where I've read this but yeah you can check this out looks awesome so LTI beta and yeah that's it for that okay so let's talk about my favorite that also has a massive flaw so I discovered this component attractions and this is probably one of the best designed ones it's absolutely gorgeous in my opinion and I really want to use it it's really awesome let me just see components accordion you have autocomplete badge their site looks gorgeous in documentation but the problem is in their examples they don't include the Imports for the example so you copy over the example you have to import it yourself which is a tedious but okay I can get behind it that is fine so you can see how a button looks like which is really awesome let me just see they have a model and a dialogue of course it looks really pretty and let me just see they have a switch also I think switch love me some switches yeah and then and okay here comes that part that I'm frustrated by looking at all of these libraries so let me just see teaming with SAS of course I don't have anything against SAS but I really don't want to use SAS because I'm using both CSS or something else for example and you can configure it in some convoluted way but why can't it be this way simpler so you have to import their SAS theming which really isn't bad you do it like this but my question is why just use CSS variables please and then you have to override the CSS SAS variables my let's see wow that's a constantly on my mind okay yeah and then it shows it like this and I'm like why this barrier to entry right and this is such a shame this is such a gorgeous Library and if we go to their GitHub let me just see yeah it's even actively maintained okay maybe a year ago or Etc but I mean there's really nothing to it like simple does it right you don't really need always the most complicated thing but yeah that's really such a shame just let the users use the web platform there's like really no reason to use all these convoluted tooling and Etc and let's talk about honorable mention this one is also a work in progress I don't even know how to pronounce it it's proy UI so this is really unique so it gives you what I talked about CSS variables so you can configure Your Design tokens so it has let me see alert buttons and I also really like this demo here it's a bit scuffed at times but yeah it's really neat idea and great presentations you can see the code here so you have danger and Etc here's a switch so you can see the default switch with a label and the author is actually working on this and it really looks like something awesome so I wanted to shout it out even though it might not be ready even though it's version 3 but it doesn't really seem ready let me just go here yeah I don't know I can find their GitHub link here but yeah something like this maybe they should fix that someone submit them this because it's really not a good look when something like this is broken in documentation but yeah this is a really interesting project in my opinion and then let's talk about some framework agnostic Solutions so first let's talk about agnostic UI which is really awesome but unfortunately this one is also noted ready I guess you can use it get set up now so you can use this for any framework it's really simple to install I think this might be my favorite one even of all the others I tried so you can just install it you say agnostic swelt and then for example it tells you you have to import the CSS Etc then you can just use the button or whatever component you want so let me just go here buttons and it shows you the buttons really looks great also and it's also easy to customize because it lets you use CSS variables what the novel idea right amazing I love it view Source yeah I actually don't know that bad it's just a lot of examples right what we've seen here is usually awesome so also they have let me just see switch I don't know why but if a project doesn't have a switch I just I'm not interested I don't know why I love switches but yeah switches are really cool I guess uh but yeah basically not a lot to talk about it has tools and then you have regular CSS components if you just want to use vanilla so here's how the toes look like and let me see if I can quickly oh here it is wonderful wonderful documentation what a wonderful project let's see on GitHub how it looks like yeah save it one single eight months ago yeah I mean it's actively developed quote unquote but yeah let me just close this and I think this is it for agnostic UI check it out some of the things aren't ready yet and are weird for example let me see dialogue I think the following button just see if I open the soil please consider say dialogue experimental and not yet ready for production until we can add missing tests so they're saying Australia then you have to add this weird dialogue route I'm not really sure why and but it works of course if you just copy this over or you can use the native one from HTML since it's supported so maybe it's easier doing it yourself but yeah really cool agnostic UI check it out and then of course honorable mentions the notorious b IG I mean a bootstrap so you can build fast responsive size with bootstrap and already I don't have to talk about bootstrap everyone knows about bootstrap is the most used one not sure if you listen to any recent syntax episode they did one with the commonly used CSS class names I think and all of the class names are of course because of bootstrap and when they talk about what's the most used media queries you guessed it the most used media queries are the bootstrap media queries so basically people think the bootstrap and WordPress are these crusty things but they're honestly the thing that powers the web the most so yeah that's really ironic and yeah they have a lot of components here that are ready for you to use or don't have to explain bootstrap I think again you can have a look at here button and Etc Carousel maybe this is something you enjoy hey I'm not going to judge if it works for you right another thing I always liked was Bulma which was really like an alternative to bootstrap so again you can go to docs and you can see their elements or components I think we just see button what's the difference between an element and the component I guess maybe this has some logic built in so button doesn't have logic but this might have some logic I'm not really sure but yeah you can even give this a look if you're interested in and here's an interesting one I recently learned about so it's beer CSS and it's based on material design of course but actually I don't have a problem with this one for some reason I don't know why so when I go explore let me just see buttons I think maybe it's because this is a well-designed site so that also plays in and it's a bit different like this looks good to me even if it's material design right okay I'll stop hating on material design sorry so yeah let me just go here faps awesome look at this is really awesome you have containers expansions great let me just see media models you have models let me just see how that looks model OKAY confirm but yeah let me just close this but yeah that's basically it I think when it comes to swelt it really makes sense to have a champion that's just regular CSS UI component framework that's really simple to use use the CSS variables and Etc and I would really loved it alright so if you enjoyed the content so far don't forget to like And subscribe and you can also support me by becoming a YouTube channel member or find a patreon in my description so thank you for watching and catch you in the next one peace foreign [Music]

Channel: Joy of Code

Views: 28,477

Keywords: svelte, sveltekit, ui components, ui library

Id: O0mNU0maItY

Length: 18min 40sec (1120 seconds)

Published: Fri Dec 02 2022

Reddit Comments

[u/SoylentCreek]

Svelte Headless UI should get some new PRs merged soon based on some comments u/ryangossiaux posted in the repo less than a week ago. He stepped away from the project for a bit after putting in a tremendous amount of work into it, and as someone who has used his library alongside Tailwinds UI on a number of projects, I’m super thankful for what he’s managed to do, and I hope that more people from the community will help support the project.

[u/ic-florescu]

Hey, everyone.

I'm coming here from React-land (and have 6+ years of experience with it of the 20+ in software/web dev).

In my opinion, the Svelte UI ecosystem still lacks a full-fledged library that facilitates building applications with "real-life" user input: I'm primarily referring to components such as autocomplete/select and date/time pickers. I know there are stand-alone options out there and one could, in theory, visually integrate them into a chosen UI library, but I'd wish we'd have something like Blueprint.js, Ant Design or Mantine UI for React.

The only one that comes close, as far as I've discovered, is Carbon. But for some reason I really, really don't like their design system.

This is - IMO - the single big showstopper when considering Svete/SvelteKit for a new, greenfield project.

Just my 2c.

Disclaimer: I may be a bit biased. I'm the author of a number of open-source projects in React - some of them front-end related, such as Mantine DataTable, but I've also built tRPC-SvelteKit... because I f*cking loved Svelte from the moment I first discovered it!

So, I know the ecosystem needs a bit of time to catch up, and I know there's a lot of work involved in bringing a new UI library to life; did my own share. But unfortunately there's only so much unpaid work I can do for the benefit of the community :-)

[u/tommertom]

Ionic - https://ionicsvelte.firebaseapp.com/

[u/percybolmer]

At first I didn't understand why people went Tailwind, because I was so new and needed components to be done for me.....

After a few months around in the frontend, I totally will root for Tailwind, once you get familiar with it, it is so remarkably easy and mobile first was new to me, but now I wouldn't love without it

[u/planetaska]

I really wish Skeleton's components design and default UI themes can look a bit nicer... That's my only complain about it.

[u/gopietz]

I’m a Python developer, currently working on a web app and needing a frontend in the process. I’m definitely not a designer and quite far away from calling myself a JS developer. That’s my situation.

I definitely need some help building a good looking UI. Tailwind looks cool but pairing it with svelte doesn’t seem like a match made in heaven.

I started with skeleton a few months ago and switched to daisyui after some time because a) I needed components that skeleton didn’t have at the time and b) noticed that adding a bit of logic to daisyui components to get interactive svelte components really isn’t a lot of work.

I like daisyui because it gives me the design part and I can add the functionality part exactly the way I like on top. Using prebuilt svelte components gives you the risk that they work in a way you don’t like and you cannot change much about that.

Ironically though I switched back to skeleton because a) somehow daisyui looks really ugly and unrefined to my eye after a while and b) skeleton has been gaining a lot of momentum and added a lot of stuff. I’m mostly happy with skeleton right now.

[u/uduni]

Carbon Components

Border-radius is so 2010s 😂

[u/roamingcoder]

Well this is a bummer. I hate react but I need better ui libs to switch to svelte. Angular, vue, hell, even blazor have better offerings.

[u/an1malm0thr]

Carbon components https://carbon-components-svelte.onrender.com/