The Future Of Tailwind UI Component Frameworks? A look at shadcn/ui.

if you've been around for a while you probably heard of Shad CN it's kind of blown up in the react ecosystem in the last year and I wanted to take a look at it for View and see if it's something that would be interesting and that I could use for my next project and then I'm going to create a quick app with it I'm going to use some AI tools with Amazon Bedrock I think it'll be pretty fun but first let's take a look at chaden so here is the Shad CN website they call it the build your component library and what I think what's really interesting about this component framework is that you can pick and choose exactly which components you want to add in and so it has a much smaller bundle size it's also has some of the things that you really desire in a UI component framework it says it's accessible it's customizable it's open source it's based on Tailwind so you have all the fun utility classes that you know and love so when I first saw this and I saw so many people in the react react ecosystem trying this out I definitely want wanted to try it out and I found that someone had created a view version they call it Shad cn- View and it has the same kind of H1 tag build design components that you can copy and paste into your apps accessible customizable open source now one big thing that you have to realize if you're using this library is that it's an unofficial community-led viewport of Shad CN UI so they're not officially connected to Shad CN but they've done a really good job and it looks like they've been keeping up with with the Shaden parent so for example uh Carousel recently came out on the react Shad CN library and they have already ported it over to the V1 if you look at the GitHub it seems like it has some momentum going for it it has 1,700 Stars it looks like if you look at here it supports all the major view ecosystem libraries or Frameworks so we have v n Astro laravel and you can see here's some of the components as you expect it has the ones that are important to most of us like alerts data a combo boxes class carousels the button uh I always like starting with the button so let's see how we can get this installed into a brand new n app so I'm going to follow the directions I'm going to click on N here and I have a brand new n app here so I'm just going to copy and paste it here for first it says obviously create a new n app and then you need to install typescript let's do that now I don't think you really need to do this because we already have typescript installed but I'll do it it says install the Tailwind CSS module and then it has had the N module so there is a way to do that we're just going to copy and paste it in here and then we need to configure it so I'm going to be lazy I'm just going to I'm going to copy this whole thing and then go into my next config and I'm going to paste it let's give giving me a red squiggly line here so I'm just going to reload the window so I'm still getting the red squiggly line I'm not sure why but let's see if this all works uh the next step in the configuration is to run the this init command so I'm going to run it and it's going to ask me a few questions all right would you like to use typescript yes which framework using next which style would you like to use uh I guess there's two different Styles I'm just going to leave the default one which colors would you like to use slate gray zinc neutral Stone I guess a slate seems like these are all kind of boring colors but we'll just leave it on the default slate where is your Global CSS file I actually didn't create this yet so I guess it'll create it for me would you like to use CSS variables for colors yes and then I haven't created the Tailwind config file but I guess I'll have it create it configure import Alias for ACT components yes configure the import Alias for utils that looks good right configuration configuration components to Json yes so I'm glad it kind of does this all for us cuz I wouldn't want to have to do all this all this manually though it does give instructions all right so it says it's done and this is kind of interesting I noticed this in the documentation for some reason I don't know if it's my monitor or or my browser but it's not showing anything so I have to switch it to light mode mode and essentially it's just asking me the questions that it just asked so I hit enter on there now I have this components folder and I have live I don't really see anything in my components folder but I guess once I start adding components it'll be added in there let's try it uh now let's let's add this button so I'm going to come back over here and I'll paste that in and let's see what happens so this is okay it says it's done cool so now we have components UI button. viw and if you look at button. view it added all this in for us kind of by convention by default so we shouldn't have to do anything and we should be able to just use this button so let's try to use it since we're using N I should be able to just go into my in index. viw and just import it in because it has automatic Imports this is a button all right cool it shows our button here as we expect it uh nothing too exciting but we able to do that let's try a different one so now that we have a button in let's let's add this calendar one in looks looks nice so I'm just going to run this command on the command line Shad cn- viw latest ad calendar just going to install it and now we should be able to put a calendar in let's take a look all right looks like we have a a big calendar here we can do selections and then if we want to know how to use the calendar if we come back here it should give us the slots that they have day content day popover some examples of how to use it which is pretty handy and helpful it looks like it was based on VC calendar or you can go to the shaten UI to get a little bit more information and it does give you some manual installation steps too uh so this is a really an interesting way so I've added in two different components and if I look back over here I can see here that I have my button I have my button here and my calendar and now I can import those in uh inside my app and I haven't installed the whole library either so I haven't installed like every single component so if I go to my package Json you can see here my dependencies I have Tailwind CSS that we installed which is very lightweight and then we have the Shaden say CNN so this is more of a developer dependency so it's not going to be included in the bundle size in the bundle at all you can see here for dependencies themselves I have view use core but I don't have I have radex view which is a small Library that's the unstyled accessible components for building high quality designs but I'm not but I'm not adding a bunch of dependencies that's going to build and make a huge bundle size and then I have access to the actual source code itself uh if if I ever want to go and make changes so I can go directly into this button. viw file I can change the Styles and whatever else I want typically in other UI component framework libraries there's a theming option and there is one here too so it's really done through through CSS and Tailwind so you can do all the theming through there you can change the colors and change the conventions so let's say this button right here so let's say we want to just change the the color of it we can just do BG green 500 so I just add that utility class and if I come back up to my local host now it's a a green button so I'm assuming that most of the theming that you want to do through Shad C CN would be just going through and updating the CSS classes you can do uh addin variants too so if we look inside here we have default destructive go so these are look very similar to what we saw when we were using prime Tailwind Prime View and some of the other component libraries so let's say we put in destructive we look back over here I think this class is overriding it so let we delete the class okay so like destructive is green ghost looks like this with the ghost basically this is same sort of styling we saw in other component Frameworks all right so since we had a quick tour of chatsi and view I think we should just try to create a quick app and I'll show you and walk you through that now all right so let me show you what I came up with so I'm going to do a quick demo of the app and then I'll dive into some of the code and I'll put a link to the code in the description so you can follow along uh I wanted to do a little bit of a tweak on the popular to-do app but I'm sure you've seen a million different to-do apps so I thought it'd be interesting if it if you could add in to-dos and then use AI to give you suggestions on how to complete those to-dos so let's say for example that we are a student and that we need to do a few things so let's say we need a study homework let's say we need to also beat a video game and then lastly uh maybe we need to feed the cat and so now we have three different suggestions here I just made this really simple this is the name of kind of basically the too and then this is the ID and then we can add notes in later but I wanted to make sure that was possible and you can also if you need to just press the X and it deletes it and I was assuming like maybe you have a couple of tasks here and you need some help with them or how to complete them now these are pretty trivial tasks I think most people know how to do it but let's see what the AI thinks so I'm going to hit the how to complete tasks you can see right here I'm using a skeleton loader I'm also uh disabling the button and these are all by the way Shad CDN components all right so here it returns some things for me here are 10 unique steps you can you can take to complete these tests these tasks review homework notes and textbook chapters related to the assignment make flashcards for key terms and Concepts ceps do practice problems set set up a study schedule uh consult online forums so I I I kind of really like this the possibilities that I could ask are AI or endless but I thought this would be kind of a fun little thing to get some help to complete these tasks in in case I didn't know and so it will take every single task so if you have like 10 of them it's only going to return 10 items back all right so let me show you how I put this together and what kind of code I'm using here first of course I am using Shad C end I pulled some components in I you earlier you saw the button but I also pulled in the card component and the input and the skeleton component the card component is actually pretty unique there's a whole bunch of components it pulls in for Content description Footers uh the skeleton is just a skeleton loader it actually looks really good and the input has a normal input now I left the all the default theming around it if you really wanted to go in and change the Shad CDN theming there is a component on. Json file which you can do some configuration but there is also a CSS file this tailwindcss and this has the layers the base and here's all the CSS variables and for example primary is the primary color of all the buttons so if we wanted to change all the button colors this is an hsl format so I would have to change uh all this and do it you can also inside Chad CDN itself if you go ui. Chad CDN you can create your own themes so if you click themes here you can customize it put whatever you want on here I think okay you can do the same thing on The View website too so if you want to you can customize the themes that you like and then copy the settings you can click here copy code and then it gives you all those hsl values so you can use that and copy and paste it directly inside your app which is awesome just for the sake of Simplicity I just left it at the default kind of ugly I did change some of these colors using tailwind and another thing I used is I have something running right here and this is all the configuration for the app so I'm using amplify new code first DX Gen 2 so this is a really slick way to create your infrastructure as code on the command line you do obviously do need an AWS account to do this but everything we're using it using today are ond demand services and to get started with it I already did this beforehand you can check which one you want nextjs page router app rouer even though it only has these two I'm using n and it works fine so keep that in mind if you go to next app router you essentially just do this mpm create amplify at latest and it'll create a folder structure so let me show you guys that so after you run that command you'll have this amplify folder here and you'll have uh a few folders this off and data so I didn't really change anything in this off this creates an identity provider that you can use to help log in we didn't use this this in this demo but it's there and then also I created this resource file and in this resource file this is how you create your schema and this will create an app sync backend for you and this will allow us to talk to our back end from our front end and I created this Bedrock response which is a type of schema so I wanted to make sure that I could create a a schema that talks to Rock I also have this to-do model that just has a content and is done and everything's public right now just uh to keep things simple and then I use this as Bedrock which is this query now this thing right here if you're kind of confused on the syntax if you're in the documentation and you click on data and you scroll all the way to the bottom there's something called add custom business logic experimental and this lets you create custom queries or mutations using apps so this is a little bit more advanced but this is a really powerful feature that lets you kind of break out of the box cuz normally what happens when you're using appsync we have these app models and this will create all the resolvers and everything you need to create update and delete a to-do to-do schema so you can update it delete it create it it'll have all the resolvers it's backed by graphql and it'll do that all for you and you can then use the API but if you need to kind of break it down so maybe you have a specific query that does something outside that you can create this custom business logic so or a custom querer mutation so in this case we created a custom query uh for ask Bedrock that uh takes in an argument of an array and return returns back a Bedrock response and then we're essentially telling everything that this is all going to be public it's an API key that we're going to use if we look at the backend. TS file that what this file shows is that we have uh we are going to use Us East one and we have this backend already defined for us a lot of this is boiler plate so we don't have to write all this in here this was created for us but we're going to create a new HTTP data source that's going to connect to bedrock which is allows us to uh use Claud which is going to be our Ai and then we're going to create uh some this grant principal has the correct I am permissions so that way the we can invoke Bedrock model and then we're going to add a resolver and what this says is that when we get requests in go to this Lambda resolver here this ask bedrock.la 2 model and doing a post there's one more thing you need to do to get this all up and running as well uh obviously you have to have an Amazon or AWS account and then to get Amazon Bedrock running as of today you need to search in the console for Bedrock or Amazon bedrock and then when you choose it you'll need to click get started and then it might come up with a popup telling you that you need to handle the access to your models you can click on model access at the bottom you'll see all these ones they'll see available the request so you have to enable this before this will work you can click M manage model access you can select them all the ones I'm using is CLA right here and then you can click all the way at the bottom and request model access and then after you do that you should have uh in you should have access to those models sometimes Claude makes you go in and do an additional request but it should be automatically approved for you and then you can continue and use those on in your app so if all that uh if all you put all this code in here uh you just need to run on the command line This npx amplify sandbox so I'll show you if I come back over here I run MPX amplify sandbox this will take that code that we have there and it will create an eeral environment for you and then we can test locally and like I said this is in developer preview right now we love to see more people try it out test it out it will be going to General availability later this year but this is a great way especially if you're in a team and everybody needs to test different logic out they can all uh spin up their own environments and test things out so while that's spinning up a few extra things I needed to do to get this up and running is if I come back here to my to the documentation this is at docs. amplified. AWS I can search for n and we have instructions how to get n 3 up and running and so if I come here go to next there's two files I need to create a plugins folder and then I need to add in the amplify abds client and server and that's all I did I just copy and pasted here and if I go back into my app I just pasted it here in this plugins folder and you really don't have to change anything it will automatically grab the config file that that's that's an amplify configuration Json file that will be created soon as this sandbox uh is done running so it's already done running here it has all these values it'll create this file that'll put into the root of your application right here uh you can probably see it right there the amplifi configuration right at the bottom and then it'll configure everything so that way when you're inside your app and there's also another one called server and you just copy and paste this directly inside here you can look at it if you want but this sets up the tokens it sets up all the configuration you need and let's say I'm in my index view file if I go to my script I can now use this dollar sign amplify and I import it from use nu app and this will have everything I need to run values in the client side or if I'm on the server server side and I don't have to worry about that so it provides like our fetch off session user attributes sign in sign out list and importantly our graphql client and that's how we're going to talk to our back end so if we go back to our index. viw file uh I did a lot of this if you've seen my previous video where I was uh looking at next UI you can see this is similar code to that I use this similar thing but I use this use async data and I'm using this amplify graphql client so every time the app loads I query the list todos and then I set it uh it returns basically this to-dos right here which then I can increment using a V4 in my app right here and I have a bunch of different Tailwind classes and then I have here's the kind of more of the interesting part but we do have things like you submit it use it uses this graphql client and it submits the mutations and variables and by the way this is all a typed so it it makes a lot of sense this mutations right here I'm I'm importing in from our source graphql queries and Source graphql M mutations these are files that you can generate to help you do queries to the graphql back end I'll show you what that looks like uh so you can write these yourself if you are proficient in graphql and know how to create gql queries but I always prefer to generate them so there's this command here where I do npx amplify Cen this is also in the documentation if you search for Cen you can add the region which is uss2 and then the app API ID which is this long uh number of digits here and you can get that directly after you run the npx s box which is right here and it shows right here if you look it's in right here AWS appsync apid here's the the value and you can just copy that directly out of this output and you essentially put this together you uh you grab that you put this together and it will generate this folder after I hit enter here it'll ask us a few questions and it'll create this folder in the source It'll ask you where you want it uh you can kind of put it wherever you want want but I I like to just use the defaults it's this Source folder and it'll create all the mutations queries and subscriptions for you and this becomes really helpful because then you don't have to write all this graphql code yourself so H it's pretty nice you can also delete this if you don't want to over fetch or maybe fetching too much information you can customize these queries to to what you need so going back to index. viw we'll come back to the suggestions but on submit we're just doing it to this graphql client and we're passing in this create to-do and we're setting the variables and same thing with delete we run a mutation for delete to do and we set the variable and this gets passed into this onclick delete what I kind of want to show you a little bit more interesting is this one called onclick suggestions so we have this ask Bedrock which is this new custom query that we created that talks directly to bedrock and uses claw we can do a query for it and then we pass in the variables in this case this takes array an array so I just did this type coersion this to-do that value is an array of all these to-dos and then uh when I get the values back it comes in this Json format so I run json. parse uh this is all typed as well too so I can grab the body from it and then I cast it as a completion uh so so once you parse it it's an object and completion is there and then I console log it out and then up here I use a few of the Shad CN I always want to say Shad CDN anybody else want to do that Shad cn's components they do have a form one I didn't use it but you can use that I use the input one I passed in the v mod too I use the button here add some classes on it and here is after you click this button it runs the onclick suggestions I use this skeleton loader which makes those nice little lines on the page and then I use a card and a card header and I grab the suggestions. complete and I use this white space prewrap and there's V HTML which you don't know is a way to convert text into HTML and then it just kind of makes that nicely formatted view for us uh and that's that's really the the the biggest part of this the rest of this I'm using cards and headers to kind of make that nice card in the middle and that's that's about it so I kind of went through that fast but I would highly recommend if you are trying to do this yourself look at my repo look at how I did it it was pretty straightforward putting all this together just took a little bit of time most of it was just copying and pasting like from our official documentation say it's so good awesome well let me know if you guys have any questions on this it was a really fun app working on it uh appreciate it thanks take care also what should be my next app I create I've already what other UI component Frameworks do you want me to look at do you want me to Deep dive into one of these I didn't really deep dive into uh Shad CN there's so much more stuff I could look into more components I do like this this idea of of just downloading the components and putting them directly into my app into this components folder uh and then just using them and I can make changes to them it does feel like maybe this could be the future I don't know let me know thanks

Channel: Program With Erik

Views: 5,206

Keywords: UI Component frameworks, Shadcn vue, Shadcn tutorial, Shadcn Vue tutorial, Vue 3 tutorial, Program With eric, Program With Erik, Erik Hanchett

Id: hz3V6VyJxKE

Length: 24min 54sec (1494 seconds)

Published: Fri Jan 19 2024