The Best Next.js 13.4 UI Library (shadcn/ui Setup and Tutorial)
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we create a Next.js 13.4 project with the shadcn/ui UI library. We understand how to add new components to our application, how to create custom components, and how to build UI interfaces with the shadcn/ui library. This is a great introductory video, and should help those new to Next.js get started with one of the best Next.js 13 UI libraries out there. If you're looking for a Next.js 13 UI library , I'd suggest giving this one a shot for your next project.
npx create-next-app -e github.com/shadcn/next-template
Client VS Server Components: • Next.JS 13 Server and ...
Final project code: github.com/coopercodes/introT...
0:00 Intro / Project
1:20 Set up Next.js 13 project with shadcn/ui
3:15 Create initial UI
4:15 Create calendar component
9:10 Create button component
11:57 Final project / thanks for watching! - วิทยาศาสตร์และเทคโนโลยี
Great tutorial - this shadcn library looks great ! - thanks.
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
Thanks so much for the comment Gerald, glad it was helpful :)
I really liked your video. you doing good work. keep it up.
The timing couldn't be better. Common Cooper W
I forgot to reply to this, I'm a noob. You are the goat bro I appreciate the comments!
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.
@kamaliddinsattorov7493 did you find a good tutorial for this?
Thank you Cooper!
Awesome lil tutorial! Maybe next go in-depth on customization?
I love your videos. Could you please do a small Next.js 13 project video using this Shadcn UI, will be highly appreciated
awesome, thanks!
Nice. It has a macOS look to it. I like the menu bar. I wish there was a tree view or list component
Thank you
I tried to get mantine to work with next for 13 when 13 first came out. Gave up after 3 full days.
Was fun
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 :)
Mantine also doesn’t work well with tailwind
Mantine just need to add use client to all their components just like shadcdn did. Manually doing it is such a drag
@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.
@@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.
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?
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.
@@lalit5408 Thanks for the reply! Yeah I watched a bunch of videos on yt and learned that you can easily indeed modify the css :)
Hey is there any other library which can work great with Next 13 app directory
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
Can we use the shadcn/ui without typescript or so to say with javascript only
i have same question
Wait. If the components use 'use client' they are client rendered.... so this library does not really do SSR... am I wrong?
th-cam.com/video/lJxU3-61F2I/w-d-xo.html 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).
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?
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.
So, nobody is recognizing radix-ui but shadcnui which itself is built on top of radix?
During the intro I literally explain Radix UI and how shadcnui uses it to enable better functionality and accessibility features. 0_0
This process makes me appreciate MUI more.
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
Whenever I see .ts or .tsx I run far away from the library 🥰🥰 It's probably just me.
doesn't shadcn specifically say they are not a library???
SurrealDB
Lie berry.
Real talk where the truth berry at 👀🤔
@CooperCodes lmao you're good chit man!