Create 404 Page in Next.js with shadcn UI
In this tutorial, we will create 404 error page in next js with shadcn ui. First you need to setup next js with shadcn ui project. Before use 404 not found page in next js with shadcn ui you need…
Aaronn
Hey there! I'm Aaronn, a Full Stack Developer who's all about React, NEXTJS, Node.js, and Tailwind CSS. I'm on a mission to craft awesome websites that look great and work even better.
How to Create Dividers in Next.js with shadcn UI
In this section, we’ll learn how to create dividers in Next.js using Shadcn UI. We’ll cover horizontal and vertical lines, as well as dividers with icons. 1. Creating Simple Dividers Using the <hr/> Tag. 2. Adding Divider Line Colors to…
Install & Set Up Styled Components with React, TypeScript, Vite
In this section, we’ll walk you through the installation and configuration of Styled Components in a React with TypeScript project using the Vite build tool. 1. Create React App Using Vite Follow these steps to install React with Vite and…
How to Use File Upload in React with MUI 5
In this tutorial, we’ll walk you through the process of implementing file uploads in a React application using Material-UI (v5). We’ll explore Material-UI 5’s file upload button and utilize the useState hook to showcase an image upload example in React.…
How to Use Material UI 5 Buttons with Icons in React
In this tutorial, we’ll learn how to use buttons with icons in React Material UI 5. Install & Setup Vite + React + Typescript + MUI 5 Before you begin, make sure to install the @mui/icons-material package. 1. Create a…
Build a Drag & Drop Image File Upload with React and Material UI
Implementing a user-friendly image upload feature can significantly enhance your React application’s functionality and user experience. In this tutorial, we’ll walk through creating a drag-and-drop image file upload component using React and Material UI. You’ll learn how to combine these…
How to Build an Add to Cart Page with React and MUI 5
In this tutorial, we’ll create shopping add to cart page in React Material-UI (MUI) version 5. We’ll create a simple product card with an Add to Cart button and a cart page that lists all added items. Please note that…
React CRUD App Tutorial with MUI 5
Building a basic CRUD (Create, Read, Update, Delete) app in React with Material UI (MUI) version 5 requires a series of steps. Here’s an illustration of creating such an app within a single page. While this example covers the essential…
React MUI 5 Form Validation with react-hook-form
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.…
Building a Next.js Hover-Activated Dropdown Menu with Shadcn UI
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…