Best UI Library for Svelte

skeleton describes itself as the UI toolkit for spelled and tailwind and the way I like to think about it is imagine a framework specific Library like Mantine and a Tailwind component Library like days UI had a baby and then fed that baby Muscle Milk for the first year of its life then you get skeleton UI in this video we're going to explore and learn how to use skeleton UI by budding this simple notes app here skeleton takes full advantage of svelt's data features like components stores and actions and was designed from the ground up to take advantage of Tailwind but unlike other libraries it doesn't try to force its design system Onto You For example here we have the same exact component with drastically different styles applied to it at the click of a button so you can make it look however you want now there are a lot of incredible features that the team has built in the skeleton that I could talk on and on about but we're going to see them in action here in just a few what I believe to be one of the best features though is the people the team behind skeleton UI is incredibly active and responsive and they're always looking for ways to improve the library through the community's feedback do you have any questions or you want to see a feature added don't hesitate to reach out to them on Discord or open an issue on GitHub now before we get started I want to thank the sponsor of this video me Hunter bite in my recently announced course modern SAS apps with spell kit stripe and Super Bass the waitlist is now open which gives you 30 off the launch price so check out courses.huntavite.com to learn more now to get started using skeleton we actually first need to install it and since it's so tightly integrated with Tailwind setting everything up manually can be a bit of a pain so we're going to be using the skeleton CLI option which sets up a new spell kit project with skeleton UI and Tailwind already installed however if you want to install it manually you certainly can the instructions are here in the docs now it's going to walk you through the normal spell kit setup and then offer some additional component dependency options I'm just going to select both of these for this demo but of course only select the ones you actually need we're also going to add both Tailwind plug-ins for forms and typography because why not and then it's going to prompt us to select a theme and if we go back to the docs here we can see that skeleton has a few different themes to choose from out of the box now we're gonna be creating our own theme here in just a few so we're going to go with the default skeleton theme for now and we'll select Bare Bones and it's going to install all the dependencies and scaffold out the project once it's complete we can open it up in our favorite text editor and start the dev server so as you can see we now have a spell CAD app running with skeleton UI ready to go now let's create our custom Theme by going back to the skeleton docks clicking theme and then create a theme skeleton provides us with a theme generator that not only allows us to customize and see the changes in real time but also gives us dark and light mode toggles and disapproves of our color choices if they aren't accessible what enables this theming capability behind the scenes is a powerful design token system and design tokens if you're not familiar are essentially a way to abstract Your Design system into a set of variables that are then used to drive other styles out of this allows you to easily change your entire design system without having to go through and change every single instance of a color font size or border radius right now skeleton does some really cool things with design tokens for balancing out colors and styling components so if you're interested in learning more about how it's working behind the scenes definitely check out this portion of the docs here now if you jack up the theme Beyond repair you can always reset it to the default by toggling the preview off and then back on again I already have some colors picked out here so I'm just going to copy and paste them in and then now if we scroll down a bit we can see that we have a few different options for our theme we can customize the font family that text color border radius and Border sizes these are going to get applied to those design tokens that are used throughout the rest of the theme so once everything looks good we can click on Show Theme CSS and it's going to give us the CSS of the theme that we just created so let's copy this and then paste it into a new file in the source directory of our project called theme.post CSS now something you might notice here is that the color variables look a bit weird they just have a three RGB color channels this because they have to work with Tailwinds opacity modifier syntax so if you want to customize these colors further like not even use the theme generator and you could simply add your existing colors here in HEX format and then convert them all to RGB using the hexd RGB extension for vs code all you have to do is just select all your colors controller command P type in RGB underscore space numbers and then you're good to go so now we have our theme we can replace the default skeleton theme with our theme in the root layout that's felt file if we go back to our browse now we can see that our theme has been applied so I want to start by taking a look at elements which are your common UI elements consisting of HTML and CSS there's no spell component Imports required elements are the building blocks of components so if we add a button here and we give it a class of BTN we're going to see that it does have some default button Styles applied to it it's kind of a bit hard to see because we don't have a background color so your first instinct might be to add one of our custom theme colors like BG primary 500 but immediately there's an issue text color is white it's not accessible it looks terrible the correct way to style this is to use variants which are can styles that automatically apply the right colors in the right places to the element so you can check out the different variants here in the docs and you can see that depending on the variant the text color is adapted as well and this all goes back to what we set in our theme as the text color depending on the different background colors so if we change our button here to variant filled primary we now have a button with our custom primary theme color and an accessible text color if we instead change it to variant filled secondary text color is going to change as well what's great is that these variants aren't restricted to buttons they can be applied to a wide range of elements for example if I turn this button into a div the styles are still applied I obviously you wouldn't want to use the BTN class on a div but you get the idea variants can be used all throughout your application now if we look back under the docks under Tailwind we can see there are a few other elements available for us to use and to better understand how to navigate the skeleton docks let's start by taking a look at the card element so they give us a couple different examples here and we can even adjust the good old variant we just learned about via this drop down to check out the different styles something important to know is that when we click on this code icon here it just shows us a minimal preview of the HTML and classes that are being used in the examples if you want to see the full source code of the examples like this image and all this other stuff they have a link to the page source code here where you can check out the full example code now if I click on the classes tab here at the top we're going to see all the classes that are made specifically to be used with this element and each of the elements in the docs have a very similar structure to this so once you learn how to navigate the docs for this element then you'll be able to navigate the rest no problem now let's head to this felt section of the docs this is where we're going to find all these felt actions and components that skeleton has to offer some of the actions include things like copy to clipboard or Instagram filters for images and the components include things like accordions app shells tabs Drop Zones and a lot more similar to the elements we could see a few different variations are available for each of the components and we can also see the different props slots events and even keyboard actions if any exists for that component we're going to come back to these in a bit when we're building out our app to investigate them a bit more but these are here if you want to check them out now now the last part of the docs where things get a bit more interesting the utility section is where we can find all the you guessed it utilities that skeleton has to offer some of the utilities include things like toasts modals pop-ups and even a local storage store which we're going to use here in a little bit so now we've taken a good look at the Docks let's start to build out our app let's start by setting up a basic layout or shell for our app using the app shell component so the app shell docs page has this interactive example we can use to see where the difference thoughts are in the Shell this is very useful to determine which slots you actually need to get the desired layout now we're not going to be using all of these but it's nice people to visualize them like this anyways there are a couple of prereqs we have to take care of before we can actually use the app shell first we have to add some classes to the Apple HTML file to enable the app shell to fully expand and we also need to update our Global style sheet to prevent duplicate scroll bars so let's go ahead and make those adjustments inside of our code now then I'm just going to copy this app show example code here and paste it into the root layout and as you can see there are slope fragments for each of the slots and if you're not familiar with fragments they're basically a way to group elements without adding an extra node to the Dom more specifically in this case they gave a stability to place content in a name slot without having to wrap it in a div or something like that having these fragments all over the place might look a little bit strange at first but it's actually a great practice for constructing components like this in spell the next thing we're going to do is add an app bar also known as a nav bar to the top of our app where we can place our logo app name or whatever else if we look at the app shell docs page it has a section called using an app bar and they give us a few examples of how to get specific behavior out of the app bar component like having it scroll with the page or having a sticky page header now we want ours to remain fixed at the top so it looks like we can just place it into the header slot here and then if we check out the app bar docs we can see that it too has a few different slots lead Trail and headline lead being the far left side of the app bar Trail being the right side and then headline being underneath the tube where a title or something like that could go so let's just copy this over and add add it to the header slot of our app shell now we won't be using this headline slot in this example so let's remove that and then within the lead slot let's add our app name you can also add a logo here if you'd like in the trail slot we're going to add an avatar it's not going to do anything in our example app I just want to show you something that you might actually want to put there so skeleton actually has an avatar component with some pretty neat variations and we're going to use this initials one so let's just copy it into the trail slot of our app bar now something I haven't mentioned yet is how components not elements are styled in skeletons so if I go back to the docs section of the docs and then styling they talk about a few different methods for styling components the recommended way is through these style props that are provided by each component which allow you to override some of the defaults from my understanding these are the classes that they expect you to want to change right but you can also use the class attribute to provide any utility class that you'd like so you can completely customize them right here and then there's also Tailwind arbitrary variants as well as a global Styles override we're just going to stick to the recommended way as much as possible for our example here so right now our Avatar is looking a bit big and if we check the props for the Avatar component we can see that there is a width prop up that we can use it's default is set to 16 so let's update that to 10. and now we have a nice little Avatar in the top right corner of our app the next thing we'll add is a responsive sidebar navigation which is pretty popular nowadays now skeleton has a tutorial for this on their blog but I figured I'd show you how to do it here as well and the first thing that we're going to want to do is add a bit of breathing room to our page content by adding some classes around the slot you can either wrap the slot like I'm doing here or you can add it to the individual page components it doesn't really matter and then to change the style of the sidebar itself we can use the slot sidebar left prop on the app shell component we're going to set it to a width of 52 to give it a width of 13 REM and then set the background to a slightly lighter background than the page content next let's make a navigation component which will allow us to render out our nav links in multiple different places throughout the app so I'm just going to make a navigation.spel file inside of Libs components and then populate it with a very basic nav element like so I'm using a few dummy links here just for the example but you get the idea then in the skeleton docks under Tailwind lists we can see there is a navigation list and all we have to do achieve this style is add the list nav class to our nav element and then now we can import this component into our root layout and add it to the sidebar left slot of the app shell so our sidebar is looking great right now but we still need to make it responsive so let's change the slot sidebar left prop to have a default width of zero and then for medium and above screens we're going to make the width 52 which is I believe around 13 reps we'll also remove the padding we added earlier here and instead add it to the navigation component now when we resize the window we can see the sidebar is hidden on smaller screens and visible on larger screens but we're still missing the hamburger menu so let's add that to the app barge lead slot the hamburger menu is just a simple SVG icon inside of a button the next thing we need to do is add a drawer component which is going to slide out from the left side of the screen when the hamburger menu is clicked now skeleton has a drawer utility which uses the Singleton pattern meaning we should try to only have a single drawer component that we can use anywhere in our app now something you might notice right away is that this is a bit different we have a few more Imports here we're importing drawer drawer store and then if you're using typescript a drawer settings type that's where the real power of skeleton shines the drawer store is a spelled store that allows us to interact with the drawer utility from anywhere in our app you can use it to both open and close the drawer and we can also pass data to it if we want now we're not be passing any data so we're just going to import the drawer and drawer store into our layout and then we can place the drawer component above our app shell since it's going to be an overlay right and then we can add our navigation component to its slot now to open and close the drawer we can use the drawer store to open and draw store.close methods so add a click Handler function to our hamburger menu button that's going to open the drawer whenever it's clicked now when we click on the hamburger menu the drawer is going to open and we can see our navigation links but when we click them the drawer stays open and we want the drawer to close whenever we click a link so let's add a click Handler to the links in our navigation that are going to close the drawer cool so now whenever we click a link in the drawer it closes and we're taken to the page that we clicked since our layout is now complete we can add some simple functions to the app and unlike my other videos we're not going to be doing any API calls using a database instead we'll just be using the browser's local storage to keep things super simple and also highlight a few of the other cool skeleton features and skeleton has a really cool utility called local storage store which is an extended version of the svelte store that allows us to easily interact with the browser's local storage so it operates just like any other spout store but with the benefit of persisting that data to local storage so let's create a new file in our Live directory called stores.ts and import that local storage store utility from skeleton and the writable type from store now we can define a type for our notes which is going to have an ID content and tags and then we get past that type to the generic writable type when we're defining our store so the first value of the local storage store function is the key that will be used to store the data in local storage and the second value is the default value next we're going to add a new route called new and a page component inside of it this way we're going to build out the form to add new notes so looking back at the skeleton docs under Tailwind forms they have a really nice collection of form elements that we can use we're going to use this text area for our note element so I'm just going to set up the page with a form that contains a title a text area and a button for now now this looks pretty decent but we still need the ability to add tags and we can use skeletons input shift component for that input chips are perfect here as they allow us to add multiple values or tags to a single input now they have all kinds of ways to customize and validate and limit them but for now we're just going to use the default which just requires us to bind an array of strings to the component's value prop so let's first Define an empty array of strings and then we're going to bind it to the value of the input chip component we're also going to add a Content variable to bind to the text area as well next let's add a create note function which will add as a click Handler to the button we're going to use the node store we created earlier to actually add the note and then we'll reset the content and tags after the node has been added so now when we fill in this form and click on create note the node is going to be added to the node store and we can see it here in our browser's local storage now let's add a toast notification to let us know that we successfully created a node so toasts are also single tins which means that we import a single toast component into the root layout and then we can use the toast store to show toast anywhere in our app and the cool thing is that the toaster actually going to queue up and display in the order that they're triggered and we can also customize the duration position appearance and a bunch of other things about the toast as well so let's import that into our layout and then to trigger the toast we can call the toaststore.trigger and pass in a toast settings object with all the props so here we're just triggering a success toast in the top right corner then using go to to redirect the user back to the home page where we're eventually going to render out the nodes so if we try to add a new note here we are going to get a successful toast notification and we'll redirected back to the home page as expected now let's set up the home page to actually render out the notes so first I'm just going to add a simple heading with a link to create a new note at the top next we can write out the notes in a grid using skeleton's card elements and we're going to use the node store we created earlier to get the notes and then we're going to map over them to render out a card for each note we're using the BTN Dash icon class to add a delete button to each card and we're rendering out the nodes tags as badge elements so we can now add the ability to delete notes but instead of just instantly deleting the note we're going to add a confirmation dialog or modal to make sure the user actually wants to delete the note the modal is another Singleton component so just like before we're going to import it into the root layout and then we're going to use it store to trigger it so you're probably starting to recognize the pattern here we import a component that's going to be used everywhere we can then trigger it with a store so we'll add that to our root layout and then I'm going to set up a delete no function which is going to handle the deletion of a note inside of the home page so inside of the delete node function we're creating a modal settings object with the props we want to use for the modal and if the response is true meaning that the user confirmed they want to delete the note or filtering it out of the node store and then triggering a success toast otherwise we're just going to trigger a warning toast saying they didn't delete the note now the reason we're creating this object inside of the delete no function is because we want access to that node ID inside of that response function that way we can actually delete the correct node or filter out the correct node so now if we test this out we can see that when we click on the x button we do in fact get a nice confirmation dialog here and if we confirm the note is deleted and we get a successful toast if we cancel we get our warning toast so that's going to include this crash course introduction into skeleton UI try to cover as much as possible in as little time as possible but there's obviously a lot more to learn about skeleton so I highly recommend checking out the docs and playing around with it yourself if you got by this video don't forget to drop a like And subscribe and I will see you in the next one foreign [Music]

Channel: Huntabyte

Views: 41,228

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, api route svelte, svelte routes, layouts, advanced layout sveltekit, sveltekit icons, sveltekit extensions, sveltekit productivity, svelte search, svelte react, svelte searchbar, svelte filtering, svelte stores, how to add search to svelte, search data svelte, svelte data search, redis sveltekit, sveltekit cache

Id: P_A0qQ7AuK8

Length: 16min 12sec (972 seconds)

Published: Sun Apr 23 2023

Reddit Comments

[u/m_hans_223344]

The content is really, really awesome.

A small "but": The pace is too fast. I know, it's the current trend (fireship, etc.) in our tick tock spoiled times, but that doesn't mean it's a good practice to run through the videos that fast.