Building with shadcn/ui: Badge, Avatar, Breadcrumb in Next js | Part 2
Want to master full-stack development with Angular 18 and Node.js? Check out my comprehensive Udemy course where you'll build a complete blog and CMS from scratch, covering everything from front-end design to back-end APIs, database management and deploying to Live Server ( Google Cloud Run ) Using Docker.
Learn more and get started here: https://bit.ly/angular-18-course
Join me as I dive into Part 2 of the series on shadcn/UI components with Next.js. In this episode, we explore Avatar, Badge, and Breadcrumb components, discussing installation, usage, and customization. With practical demonstrations and dynamic use cases, I'll show you how to create responsive and interactive UI elements effortlessly.
Following is the useMediaQuery hook that we created in this video:
https://gist.github.com/ayyazzafar/b0...
=====================
Previous Part 1:
Building with shadcn/ui: Accordion, Alert & Dialog Components in Next.js
• Building with shadcn/ui: Accordion, Alert ...
Next Part 3:
Building with shadcn:ui Button, Calendar & Card in Next js
• Building with shadcn:ui Button, Calendar &...
=====================
Chapters:
=====================
00:00 Introduction
00:21 Starting with Avatar Component
01:04 Installing Avatar Component
01:11 Testing the Avatar Component
02:04 Avatar Documentation Exploration
03:06 Radix UI Features
05:14 Custom Loading Status Alert
06:34 Delay Option for Avatar
07:10 Exploring Badge Component
08:55 Dynamic Badge Presentation
11:21 Creating Dynamic Badge List
12:13 Real-world Use Cases for Badges
14:02 Breadcrumb Component Overview
16:09 Custom Separator Usage
17:02 Making Breadcrumbs Dynamic
19:58 Advanced Breadcrumb Customization
23:06 Responsive Breadcrumb Exploration
26:43 Fixing CSS Nesting Issues
30:14 Testing Breadcrumb Responsiveness
31:02 Conclusion
#NextJS #shadcnUI #ReactDevelopment
=====================
Related Videos:
=====================
🔧 Building with shadcn/ui: Accordion, Alert & Dialog Components in Next.js | Part 1: • Building with shadcn/ui: Accordion, Alert ...
🔄 How to use react-bootstrap in Next js 14?: • How to use react-bootstrap in Next js 14?
🖌️ How to install and use Tailwind CSS in React.js app?: • How to install and use Tailwind CSS in Rea...
🕛 Introduction to Next js Image Component: • Introduction to Next js Image Component
🚀 Learn How to Create a REST API Using Next.js 14's New App Directory Structure: • Learn How to Create a REST API Using Next....
🧠 Integrating Zod into Your Next.js 14 App for Client-Side and Server-Side Validation: • Integrating Zod into Your Next.js 14 App f...
🚢 How to deploy Next js app to Firebase?: • How to deploy Next js app to Firebase?
🗺️ NextJS Navigation: Dynamic Routes, Replacing URLs, and Prefetching Pages: • NextJS Navigation: Dynamic Routes, Replaci...
🔍 How to fetch data from API in Next js 14 +?: • How to fetch data from API in Next js 14 +?
🎨 How to use Mongoose with Next js 14 +?: • How to use Mongoose with Next js 14 +?
=====================
To read written versions of AyyazTech tutorials, please visit https://AyyazTech.com
=============
If you want more content like this then please subscribe to my channel and click on the bell icon to get all of the notifications.
/ @ayyaztech
=====================
Hey everyone! Before we dive into today's video, I wanted to share an exclusive hosting deal from Hostinger that I personally use and recommend. If you're looking to start your own website, click this link (https://www.hostg.xyz/SHEyO) to get a special discount on their reliable and easy-to-use hosting plans. Plus, you'll be supporting the channel at no extra cost to you. Now, let's get into the video!