In this tutorial, we will create alert message in next js with tailwind css. First you need to setup next js 13 with tailwind css project. 1. Create next js with tailwind css simple alert message primary, secondary, success, warning,…
To integrate NextUI into your Next.js project, follow these steps tailored to your project structure. NextUI CLI (recommended) If you are starting a new project, you can use the NextUI CLI to create a new project with NextUI pre-configured: Next…
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…
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…
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…
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.…
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…
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…
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…
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…