Shadcn UI React Tutorial: Xây dựng giao diện người dùng tuyệt đẹp trong vài phút!

Welcome to my "Shadcn UI React Tutorial"! In this video, I'll walk you through configuring Shadcn, Vite, and TypeScript to create a seamless development environment. I'll also show you how to install essential components and implement a login form from scratch. Whether you're a beginner or looking to refine your UI skills, this tutorial is perfect for you. Let's dive in and build a stunning UI together!

► Download the FREE PDF Now. Pass Your JS Interview with Confidence! ➡️ https://monsterlessons-academy.com/newsletter_subscribers/javascript_interview?utm_source=youtube&utm_medium=description_link

► Join Thousands of Learners! Start My Advanced Courses Today ➡️ https://monsterlessons-academy.com/courses?utm_source=youtube&utm_medium=description_link

► Boost Your Knowledge! Read My Popular Blog Posts Here ➡️ https://monsterlessons-academy.com/posts?utm_source=youtube&utm_medium=description_link

LOOKING FOR THE VIDEO EDITOR? ➡️ [email protected]

MOST POPULAR COURSES

► Javascript interview questions ➡️ https://monsterlessons-academy.com/courses/javascript-interview-questions-coding-interview?utm_source=youtube&utm_medium=description_link

► Typescript interview questions ➡️ https://monsterlessons-academy.com/courses/typescript-interview-questions-coding-interview?utm_source=youtube&utm_medium=description_link

► React interview questions ➡️ https://monsterlessons-academy.com/courses/react-interview-questions-coding-interview-course?utm_source=youtube&utm_medium=description_link

► Angular Interview Questions ➡️ https://monsterlessons-academy.com/courses/angular-interview-questions-coding-interview-2023?utm_source=youtube&utm_medium=description_link

► Angular Testing ➡️ https://monsterlessons-academy.com/courses/angular-testing-unit-testing-angular-and-e2e-testing?utm_source=youtube&utm_medium=description_link

► React Testing ➡️ https://monsterlessons-academy.com/courses/react-testing-unit-testing-react-and-e2e-testing?utm_source=youtube&utm_medium=description_link

► Building real project with Angular + NgRx ➡️ https://monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch?utm_source=youtube&utm_medium=description_link

► Building real NestJS API ➡️ https://monsterlessons-academy.com/courses/nestjs-building-an-api-for-real-project-from-scratch?utm_source=youtube&utm_medium=description_link

► Building real fullstack project ➡️ https://monsterlessons-academy.com/courses/build-fullstack-trello-clone-websocket-socket-io?utm_source=youtube&utm_medium=description_link

► RxJS Crash Course ➡️ https://monsterlessons-academy.com/courses/rxjs-crash-course-reactivex-from-zero-to-hero?utm_source=youtube&utm_medium=description_link

SERVICES THAT I'M USING

Learn new skills anytime with Skillshare. ➡️ https://skillshare.eqcm.net/c/5473521/1085653/4650

Build your website effortlessly with Squarespace ➡️ https://squarespace.syuh.net/ba6mmx

Get fast delivery and Prime Video with Amazon ➡️ http://www.amazon.com/tryprimefree?tag=mla01-20

Get affordable domains from Namecheap ➡️ https://namecheap.pxf.io/21ojA0n

Protect your privacy with NordVPN today! ➡️ https://nordvpn.sjv.io/jrKWQZ

Ultahost: Fast, reliable hosting for your website. ➡️ https://ultahost.sjv.io/VmoyAM

CONNECT WITH ME!

► TWITTER - https://twitter.com/monster_lessons

► INSTAGRAM - https://www.instagram.com/monsterlessonsacademy

► FACEBOOK - https://www.facebook.com/monsterlessonsacademy

► LINKEDIN - https://www.linkedin.com/company/monsterlessons-academy

► TIKTOK - https://www.tiktok.com/@monsterlessonsacademy

REFERENCES

► Source code - https://github.com/monsterlessonsacademy/monsterlessonsacademy/tree/492-shadcn-ui-tutorial

TIMESTAMPS

0:00 Introduction

0:54 When you can use Shadcn?

2:53 Real example

5:48 Adding components

9:12 Shadcn login form

11:13 Login form with the state

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.