Aaronn

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.…

In this tutorial, we’ll create an image file upload with a preview using Next.js and Shadcn UI. In this guide, we will create a file upload feature in Next.js using React hooks. We will include a file preview using the…