In this tutorial, we’ll see form validation in React Material UI 5 with the help of react-hook-form. Ensure you have React MUI 5 and react-hook-form installed and configured before getting started. React MUI 5 Form Validation With React Hook Form 1.…
Learn how to create a stylish, hover-activated dropdown menu using Next.js and Shadcn UI. This quick tutorial will guide you through the steps to enhance your web navigation effortlessly. Perfect for developers! Before creating a dropdown menu in Next.js with…
In this tutorial, we’ll see image file upload in React Material UI 5 with the help of react-hook-form. Ensure you have React MUI 5 and react-hook-form installed and configured before getting started. React MUI 5 Image Upload With React Hook Form…
In this tutorial, we’ll see how to use button Link using Next.js and Shadcn UI. Before using the Button with Link in Next.js 13 with Shadcn UI, you need to install it by running npx shadcn-ui add button. 1. Creating…
In this tutorial, we’ll see how to use Carousel Slider using Next.js and Shadcn UI. The carousel component is built using the Embla Carousel library. So you need to install it. Also if you are using card component you need…
In this tutorial, we’ll create product cards using Next.js and Shadcn UI. We’ll make them responsive, add hover animations, and include sale tags, using Tailwind CSS for styling. Before using the card in Next.js 13 with Shadcn UI, you need…
In this tutorial, we will see how to implement a scroll area in Next.js 13 using the Shadcn UI. Before using the scroll area in Next.js with Shadcn UI, you need to install it with npx shadcn-ui@latest and add the…
In this tutorial, we will create a file upload feature in Next.js using Shadcn UI. Before use file upload in next js 13 with shadcn ui you need to install npx shadcn-ui add input. 1. Create a File Upload Feature…
In this section, we’ll see how to use icons in Next.js with ShadCN UI. ShadCN UI includes Lucide-React icons by default, and you also have the option to incorporate SVG icons from Heroicons. Next.js 13 with Shadcn UI Icons: Small,…
In this tutorial, we will learn how to use a progress bar in Next.js with Shadcn UI. Before using the progress bar in Next.js 13 with Shadcn UI, you need to install it by running npx shadcn-ui@latest add progress. 1.…