Using NextUI Components & Themes in NextJs 13

the next UI 2.0 is built on top of Telvin CSS instead of style components or css and JS which required JavaScript runtime on the client side to shape and form rcss which made it impossible to use it with the new paradigm of react server components in extras 13's app router but since the version 2.0 they have switched to tell them CSS which is good because Telvin is awesome but also it no longer requires JS runtime for our CSS components therefore we can use it right inside of our app router in Nexus 30. in this video I will walk you through how you set it up inside a nexjs application and we're going to build this little card component together which I took from the home page we're going to see in a second but what we're trying to show in this card component is the built-in ability or feature for for theming in next UI so we have this card component with different sizes and stuff pretty simple pretty straightforward but up there you can see I have different themes so it comes built in with the light and dark mode out of the box and you can also add more themes like the modern theme that I have added here which changes the colors from the foreground to the background and changes border radiuses and stuff like that so you can switch between different themes now I've started with a brand new Nexus application it's using Tailwind out of the box because next UI package uses Tailwind so you would need to Tailwind under the hood it's using typescript and pretty much everything else other than adding some prettier formatting options is what you get out of the box when you're running the next JS script now let's go to next UI documentation where we can follow the installation kind of Glide from next UI now you need to install the next UI react package but also the framer motion package because for their Transitions and animations they're using framework motion so you need to install both I'm using pnpm so there is an extra step for pnpm I'll mention it in a second but you can just copy their script and install the two packages I've already done that so you can go ahead and install if you're just following along with me now once you've done that you have to go to your Telvin config and actually add this node module folder to your content so tell them we'll pick up on it and you'd also put in this dark mode class because as I mentioned next UI comes with light and dark mode built in out of the box so you just specify that dark mode class and then you would get this next UI function from the package you installed and then pass it to a plugin this is actually where you would pass in any customization that we're going to see later on in the video for example if you want to customize your themes from the light and dark or this modern theme that I've added this is actually where you would pass those customizations but for now just leave it bare bone just passing the plugin with the next UI function just call that function without passing anything to it and then you get the default Behavior out of the box now it's essential to add the next UI provider to the root of your application and the way that we do it is through the provider's pattern that we've seen before in previous videos where we are sharing a context throughout our next.js app or specifically in the app router where we create this provider's file which is a client component and there we would just create a wrapper around all of our child component these are going to be our react server components pages and other nested layouts a common question that I often get when people see this we're wrapping the whole application with a provider or with a component that's a client component they doubt that our whole application now turns into a client component just to clarify if you import a server component into a client component it becomes a client component so it imagine this use client directive that you're defining up top it's a boundary between the server and the client if you import any component once you've defined this use client boundary it becomes automatically a client component however you can pass server components as children as we're doing it here or as props two client components without changing them to client components so it's okay to pass server components as children or as props to client components but you cannot import them inside line components just a little side note because this is a common question I get on the videos now once we have created this if we're going to come back to this file because we're also using these next themes which is a a way for us to switch the themes it has nothing to do with the next UI provider so you can just ignore this part for now I'll go I'm going to come back to this for now we're just creating this providers component which takes in the children and then wraps that children with this next UI provider now we're going to bring these providers back to our root layout where we can pass this bring in this providers to our root layout and then wrap everything else as these children's inside of this providers again here I'm just passing in a header and inside of this header if I go back to the site I'm just rendering this home it really doesn't do anything it's a link to go to the home page there is no different page on this app and then I'm using also this theme suture which we're going to get into when we talk about the next themes package to switch between the themes I'm wrapping my children Pages or nested layouts inside of this main tag on the footer so pretty straightforward layout the main point point is to wrap it with these providers where we are actually sharing any Global context using react context okay so let's save this out and go back to the next step um I mentioned that there is an extra step if you're using the pmpm package so you'd have to create a an npm RC file inside of your application and then paste in this code and then you have to run the pmpm install again this is going to get rid of your node modules package and reinstall the dependencies so it works correctly if you're not using pmpm forget about this I am so I have created this one as well okay so that's all we needed to set up our application to use the next UI package here in the docs it also explains If instead of a global installation you wanted to do an individual installation of different packages that comes within the next UI Library go ahead if if that's what you wanted to do but with this setup basically you can now go ahead and use any of the components that comes from the next UI package and you can just get them from that specific module so you're not importing all the components you're just getting what you want so let's actually use these components inside of our app if I go back to my home page you can see that I've created a little simple component that uses this card it is from here so the card component and you can see in the docs you know different values and different props that you can pass to each one of these components and different variations that they they have and how you can customize their styling because it uses television utility classes under the hood you can also pass in your own classes as you can see here I'm passing in my own classes to this card component so I have the card body I have the image this is the image of this shoe that I got from the next UI by the way let me just show you what I'm trying to build over here on the home page you can see this little card component I'm attempting to build something like this it doesn't look as nice as this but close enough for you to understand how to implement this different themes so I'm rendering this image and then I have this product size component which is it's a little client side component with this Estates for holding this selected size um nothing next to UI specific and down here I'm using the button component from next UI you can pass in different props such as the color variant the size the radius to define the shape of your button and then later on we can also Define the default values for different themes for the Border radius for the colors for the text colors and what not to actually customize the themes or add a new theme now before diving into customizing our themes or adding more themes let me just show you this theme switcher or the reason why we should need to use this now the way next UI actually implements the light and dark theme under the hood is using Tailwinds dark utility directives so if you go to the documentation for tailwind and search for dark mode or dark theme you would see that Tailwind actually supports this dark variant out of the box where if you add this dark mode class it looks up to see if it can see a class attribute set to dark on a parent element and then applies this dark variant to your component so for example if you have this HTML this is your HTML tag and you have this background white and background black if the theme is dark on this div well right now it's going to be background white but if you pass in a class of dark to the any parent of this div which is typically implemented on the HTML tag so it includes everything else or all the components now tell them it automatically applies this dark variant and turns the background to Black for this now if you're not comfortable with how to actually do this in next.js I do have a video on the channel where we Implement a dark theme in Nexus 13 using the next theme package I'm just going to explain the process quickly here but if you want to dive deeper and understand what's going on with that package and how to set that up you can I'm going to include a link in the card so you can watch that video first so first thing that we would need as I mentioned is to install the next themes package this is the package that you'd have to install and once you install this again going back to our root layout where we were including some providers for our page we're going to actually also look at this theme provider we got out of the next themes you'd have to or you can pass in some props to this theme provider for example we wanted to set the class attribute because you can also use it to set data attributes on your HTML tag because television CSS works with the class attribute we're going to set next themes to switch the class attribute you can pass in a default theme and if other than the light and dark you're also supporting any other different themes you'd have to pass it to this provider if light and dark is the only two themes that you want to provide you don't have to pass in this prop this is only because I'm passing in or creating a modern theme as well so inside of that same providers that we had the next UI provider we're just going to wrap our app with this theme provider as well and now to have a toggle or a switch to switch between these themes inside of my component I have this theme suture component which is again a client component where I'm using this used theme Hook from the next theme package and I'm using this set themes to pass in Click handlers to my buttons to switch the team the theme between light dark and modern so this is what we see up there you can Implement Tower you want it can be buttons it can be a select menu but you get the idea you can just use that a little quick note about this state that I'm using and this use effect you should only as per the documentation use this use theme provider or this theme suture or the toggle only if this component is mounted on the client because before that we have no way of knowing what the selected theme or the preferred theme is because the next themes package also reads from the user's device to know what's their preferred theme so it only needs to be uh mounted if the component is mounted so we're just checking to see if the component is mounted if it's not if you're returning null if you're mounted we have access to the preferred uh user's theme and then we can render this and that's all there is to it to implement next UI in your next.js app and create this toggle to toggle between different themes one thing it's worth mentioning is the next theme package already uses the use client directive inside of the component so you can just import them directly in server components so here they mentioned that they're already using the use client directive so you can directly use them in react server components because a pattern that you can do if you're using a UI component library that doesn't get support this use client directive you can create your own component wrappers your own client components where you're using that use client directive and then import whatever component that you want from that UI Library into your own component and then you can use that client component that your own client component inside of your react server components that's a pattern it's going to adapt the packages and libraries that yet don't support this use client directive but some of them do like in this case they have included the use client directive in all of their components so you don't have to wrap them with your own components you can just import them in any reacts every component it works out of the box now the last thing I want to mention is how to actually customize the theme so going back to the docs over here you can see they talk about the themes the fact that next year actually comes built in with theming support that uses both tailed and variants and CSS variables to allow you to sit and switch different themes or customize the different themes that they have as I mentioned they do have a light and dark theme that you can further customize you can read through this you can customize their themes by passing in different values for the layout object which is stuff like border radiuses border with and spacing units and stuff or you can customize the colors over here by using colors that comes from next UI or extending on the colors that Tailwind has or providing your own now if you wanted to add your own theme which is create a theme you can also pass in your own theme over here for example here they've provided the purple dark and then they have they're extending a base theme you can extend either the light theme or the Dark theme and then provide the colors and layout specific values to use inside that theme and that's exactly what I have done over here so if I go to my next to my Telvin config as I mentioned any customization can be passed to this next UI function we imported in the beginning I'm just including this light and dark I'm not changing anything for the light and dark theme I'm using the defaults but I'm creating This Modern theme I'm extending the dark theme or the dark version and then I'm furthermore customizing the background foreground and my primary color because the next UI library has this primary secondary success alert and danger colors that you can just switch up I'm just changing the primary as an example here to use the purple color color that you can see over here so on the dark this is what comes default for the primary color and all I'm doing is to change the primary color to be this purple so when I switch to Modern my background and foreground and these colors or the wherever in my application that I have used the primary color for example text primary 100 200 400 that's what I've used inside my components if I go back to show you these buttons you can see I'm using the primary variant for my cut the color of my buttons now if I switch up with the themes and change the primary color inside of my theme it just applies that new color wherever I have used that primary color I've also just to show some of the layout changes you can make for example border rate DSS are different as you can see uh I don't know how visible it is here but in the dark we have a more rounded border radius whereby in the modern it's more modern with dashboard radius sky is the limit there is a lot of different stuff you can customize just wanted to show an example of how to creating a theme on top of the light and dark and how to customize the default values when you're extending a specific theme that's a wrap for this video folks if you have any questions hit me up in the comments like always if you're learning anything from the videos that I create you can support them by giving it a like comment share and subscribe to the channel if you haven't already if there's a specific topic that you would wish for me to cover reach out to me in the comments or reply to every single one by myself that's it for now until next time signing out bye

Channel: Hamed Bahram

Views: 26,306

Keywords:

Id: SulQQvUqvAc

Length: 18min 32sec (1112 seconds)

Published: Sat Sep 02 2023