The Best Next.js 13.4 UI Library (shadcn/ui Setup and Tutorial)

[@geraldsy]

what an awesome tutorial! very clear and you have covered everything from scratch! any newbie can follow this til the end! Thank you so much

[@CooperCodes]

Thanks so much for the comment Gerald, glad it was helpful :)

[@kamaliddinsattorov7493]

I love the tutorial. Thank you very much for sharing your knowledge with the world. If possible, please, make a tutorial on how to create a full-stack app using ShadCN-UI. I ve been looking for such a tutorial for a long time, but there is none.

[@localmktr1041]

@kamaliddinsattorov7493 did you find a good tutorial for this?

[@splattelol]

The timing couldn't be better. Common Cooper W

[@CooperCodes]

I forgot to reply to this, I'm a noob. You are the goat bro I appreciate the comments!

[@leoprimo123]

Awesome lil tutorial! Maybe next go in-depth on customization?

[@paulthomas1052]

Great tutorial - this shadcn library looks great ! - thanks.

[@elmcapp6032]

Nice. It has a macOS look to it. I like the menu bar. I wish there was a tree view or list component

[@alext5497]

I tried to get mantine to work with next for 13 when 13 first came out. Gave up after 3 full days. Was fun

[@CooperCodes]

Hahaha yeah my guy a bunch of the libraries broke with the new app directory stuff, I went through a handful of options and found this library to be the best so thought I'd share here to help others :)

[@rtorcato]

Mantine also doesn’t work well with tailwind

[@ankit.chaurasia]

Mantine just need to add use client to all their components just like shadcdn did. Manually doing it is such a drag

[@alext5497]

@Ankit Chaurasia if you use client on your layout, your entire app becomes client side, and at that point, just use a spa and react.

[@ankit.chaurasia]

@@alext5497 Ofc using use client in layout is dumbest thing to do. Just export custom component with use client on top and use on layout. Look at shadcdn repo they use "use client" to all their components.

[@chuksvalentine3735]

I love your videos. Could you please do a small Next.js 13 project video using this Shadcn UI, will be highly appreciated

[@thecodeconfesses256]

I really liked your video. you doing good work. keep it up.

[@omarkraidie]

shadcn/ui seems amazing and eazy to use! What about styling those components is it easy (eg. bg color text color)? Or is it not recommended?

[@lalit5408]

It is easy. You've access to direct code, you can modify it however you like. Also shadcn ui ships with clsx and tailwind merge, for handling conditional styles.

[@omarkraidie]

@@lalit5408 Thanks for the reply! Yeah I watched a bunch of videos on yt and learned that you can easily indeed modify the css :)

[@faizanahmed9304]

Thank you Cooper!

[@karamcsand]

Looked great. Then I checked shadcn and Radix....quite bad experience. I followed the steps but there are big holes in the startup tutorial and I get errors quite early. I don't get the hype around shadcn. It is not a gamechanger, it is just another tool. Which has bugs. Now I go to other libraries to check how they perform

[@miro0o92]

Can we use the shadcn/ui without typescript or so to say with javascript only

[@maybeomuamua]

i have same question

[@Legendman234]

awesome, thanks!

[@Shubham-yc6nz]

Hey is there any other library which can work great with Next 13 app directory

[@vanshshah7781]

Thank you

[@musaddikrayat]

So, nobody is recognizing radix-ui but shadcnui which itself is built on top of radix?

[@CooperCodes]

During the intro I literally explain Radix UI and how shadcnui uses it to enable better functionality and accessibility features. 0_0

[@itamarsharify]

Wait. If the components use 'use client' they are client rendered.... so this library does not really do SSR... am I wrong?

[@CooperCodes]

kzbin.info/www/bejne/onvbhmZja5Z5aKs This vid is a good overview of how to understand server vs client components. The idea is that things that do not include client functionality (For example, all the text in a blog post) can be rendered on the server, but inside of that blog post you can have Buttons which are client components (As they need to have client side things such as onClick events). A design principle I plan to discuss further in a future video is imagine your components in a tree like structure, where the nodes at the bottom (or the leaves if you are familiar) are client components. This is kinda just an overview but I hope it helps. This structure means that everything above your client components gets rendered on the server, but as soon as you need client functionality you render it (in isolation) on the client. Lets say you have a landing page with a calendar component for users to sign up for a service. The calendar itself a client component, but the text around it, the navbar, the footer, and all those things can all be rendered on the server. This library itself only uses client components when it needs client functionality (like with the calendar for example).

[@aplusphilic]

Out of curiosity can this be used on other react frameworks say remix or just NextJS? Is it just examples are made with NextJS or the only works with NextJS?

[@oktoberlintampubolon4904]

Yes, you can use it for any react frameworks. The shadcn ui library is actually on top on tailwind. It means that as long you configure your tailwind correctly, the shadcn ui will override your tailwind config file only, not the other files config inside react or react framework project. You just need to be aware of the path for ui component. the docs mentioned that the component added is normally put inside the components/ui folder.

[@aaron6822]

doesn't shadcn specifically say they are not a library???

[@RubenKannan]

Whenever I see .ts or .tsx I run far away from the library 🥰🥰 It's probably just me.

[@meilyn22]

This process makes me appreciate MUI more.

[@aryan.prince]

both do different things. MUI is good if you just want a nice component library, shadcn-ui is better if you want a nice component library - but then later have the choice to fully customize every single component to match your brand style can’t do that with MUI

[@StephenRayner]

SurrealDB

[@DavidWTube]

Lie berry.

[@CooperCodes]

Real talk where the truth berry at 👀🤔

[@DavidWTube]

@CooperCodes lmao you're good chit man!