STOP choosing between shadcn ui & next ui (use BOTH)

all right guys in this video I'm going to show you how to combine Shaden UI and next UI now I'm a big fan of next UI and Shaden UI however I much prefer the components that come out of the box with next UI I really really like the sort of look and feel of the next UI components compared to Shad CN UI however I also really like how to implement forms in Shad CN UI so it's essentially a wrapper with a couple of extra bits and Bobs on top of react hook form but I really like the way we can build up forms in Shad CI so in a personal project recently this is how I've combined the two I've combined Shaden UI and next UI essentially all I'm using from Shaden UI is the form functionality and eror handling and things like that with the form but the actual form Fields I'm using next UI to render the form Fields so it's the look and feel of next UI but with the form functionality of shads nuui Now quickly before we get into it I'm going to show you how to create a simple form with Shaden UI form but rendering form fields from next UI quickly before we get into it though my Shad Nui course is now live we're going to build this fairly basic dashboard where we can see we have a couple of tabs here and we take a look at form validation as well all with Shaden UI and Zod for client side validation forour forms all of this is covered in the course and I'll leave a link in the description below to the course I'll leave a link as well for a coupon code so you should be able to get the post for about $9 or $10 with that said let's move on to the actual topic of this video and that is I've got two forms here then I've got my Shad cnii form I really really like the Shad cnii components we can see anytime we hover in or a particular form field is active I really like these labels for the form fields and whenever we hit the submit button we see this nice sort of ripple effect and we've got our really nice validation messages as well so I really like next UI if if we were to create this form using Shad nuui this is pretty much what the form would look like so I don't know about you I much prefer the look and feel of the next UI components obviously we can change the next UI and the Shad C UI styling however we want so we could I suppose change the styling in Shad seni to more reflect the styling in next UI however I much prefer just rendering the next UI components out of the box especially when it's my personal projects I'm not such a good designer and I really can't be bothered to create or try and style things make them look nice where I think the next UI library has some really good-looking components so with that said let's head on over to our code then and I've already got the shads nuui example form here we're just using react hook form to create a form we're using Zod for validation so this is pretty much out of the documentation straight out of the documentation from Shad Nui we've got two Fields we've got an email address and a password if we scroll down to the form markup then again this is pretty much exactly like from the documentation in Chad cnii we're rendering a form field and within the form field we have a render prop which is also rendering a form item a form label form control and an input component now to convert this is actually pretty easy if we wanted to use exactly the same form implementation from Shad ceni all we need to do to change this sub is instead of rendering all of this Mark up here we could simply render an input component from next UI so I've got an example here from next UI and it's exactly the same form field it's the email address form field but instead now from the render prop we're returning the input component from next UI and the input component from next UI takes a couple of extra props we can pass an error message and an is valid so if is invalid is true I.E we have an error message then the next UI inputs will display red it's got that nice red background same with the error message as well it'll display that nice red error message and to get the error message we can use the use form field hook that comes out of the box when we install the form or everything to do with forms from Shad ceni so this use form field hook comes from Shad ceni we can destructure any errors and pass those errors down into the input component from next UI so it's literally that simple we can render any UI elements from any Library we want but we can still use the Shad C nuui implementation or the Shad C nuui form implementation and just render whatever we want as the inputs or the form fields

Channel: WebDevEducation

Views: 4,132

Keywords:

Id: zj0i2lkAbG8

Length: 4min 33sec (273 seconds)

Published: Sat Feb 24 2024