Build a React Shopping Cart with MUI & Tailwind CSS (2025 Guide)

In the competitive landscape of e-commerce, a fast, responsive, and visually appealing shopping cart is crucial. For developers, building such an interface efficiently is key. React provides the foundation for dynamic user interfaces, but its true potential is realized when paired with powerful component and styling libraries.

This comprehensive tutorial will walk you through building a modern React shopping cart application from the ground up. We will harness the power of **Material-UI (MUI)** for its rich set of ready-to-use components and **Tailwind CSS** for its incredible utility-first styling workflow. To create a truly modern and performant app, we will extensively use **React Hooks** to manage state, side effects, and memoized computations.

By following this guide, you'll gain a practical understanding of how to architect a core e-commerce feature, resulting in a scalable and professional looking React application that excels in both performance and user experience.

Why MUI and Tailwind CSS for E-commerce?

- MUI: Offers a vast library of accessible, pre-designed components like Cards, Buttons, Badges, and Grids. This drastically reduces development time and ensures a consistent, high-quality design system for your e-commerce site.

- Tailwind CSS: Its utility-first approach allows for rapid prototyping and customization directly within your JSX. You can fine-tune the look and feel of MUI components or build custom elements without writing a single line of custom CSS.

This combination provides the structure of MUI with the granular control of Tailwind, creating the perfect stack for building beautiful and functional online stores.

Prerequisites

Before you start, make sure you have the following installed:

* Node.js (v18 or later) and npm

* A solid grasp of HTML, CSS, and JavaScript (ES6+)

* Basic knowledge of React concepts (components, props, state)

Step 1: Initialize Your React Project with Vite

Vite offers a blazing-fast development environment, perfect for a modern React project.

1. Create the React App:

npm create vite@latest mui-tailwind-cart -- --template react

2. Navigate into your project directory and install dependencies:

cd mui-tailwind-cart

npm install

Step 2: Install and Configure Tailwind CSS

Now, let's integrate Tailwind CSS into our project.

1. Install Tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

2. Generate Tailwind configuration files:

npx tailwindcss init -p

This creates `tailwind.config.js` and `postcss.config.js`.

3. Configure Tailwind's template paths:

Open `tailwind.config.js` and update the `content` array to ensure Tailwind scans all your component files for utility classes.

// filepath: tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

theme: {

extend: {},

plugins: [],

}

4. Add Tailwind directives to your CSS:

Replace the contents of `src/index.css` with the following:

/* filepath: src/index.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 3: Install and Integrate MUI

Let's add the Material-UI library and its required icon package.

1. Install MUI packages:

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

2. Run the development server:

Start your app to confirm that the setup is correct.

npm run dev

Navigate to `http://localhost:5173` in your browser. You should see the default Vite page, but with Tailwind's base styling applied.

Step 4: Building the Shopping Cart Components

Now for the exciting part. We'll structure our app with a product listing and a cart summary.

First, replace the contents of `src/App.jsx` with the code below. This will set up our main component, which manages all the shopping cart logic.

import { useState, useEffect, useCallback, useMemo } from 'react';

import { Container, Typography, Button, Grid, Card, CardContent, CardActions, Paper, Box, List, ListItem, ListItemText, IconButton, Badge } from '@mui/material';

import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';

import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';

import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';

// Sample product data

const products = [

{ id: 1, name: 'React T-Shirt', price: 25.99 },

{ id: 2, name: 'MUI Mug', price: 15.50 },

{ id: 3, name: 'Tailwind Cap', price: 22.00 },

{ id: 4, name: 'Vite Sticker Pack', price: 8.99 },

];

function App() {

// useState hook to manage the items in the cart

const [cartItems, setCartItems] = useState([]);

// useEffect to load cart from localStorage on initial render

useEffect(() => {

const storedCart = localStorage.getItem('shoppingCart');

if (storedCart) {

setCartItems(JSON.parse(storedCart));

}

}, []); // Empty dependency array ensures this runs only once

// useEffect to save cart to localStorage whenever it changes

useEffect(() => {

localStorage.setItem('shoppingCart', JSON.stringify(cartItems));

}, [cartItems]); // Runs whenever cartItems state changes

// useCallback to memoize the addToCart function for performance

const addToCart = useCallback((product) => {

setCartItems((prevItems) => {

const itemInCart = prevItems.find((item) => item.id === product.id);

if (itemInCart) {

// If item exists, increase quantity

return prevItems.map((item) =>

item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item

);

}

// If item doesn't exist, add it with quantity 1

return [...prevItems, { ...product, quantity: 1 }];

});

}, []);

// useCallback to memoize the removeFromCart function

const removeFromCart = useCallback((productId) => {

setCartItems((prevItems) => prevItems.filter((item) => item.id !== productId));

}, []);

// useMemo to calculate the total price. This only recalculates when cartItems changes.

const cartTotal = useMemo(() => {

return cartItems.reduce((total, item) => total + item.price * item.quantity, 0);

}, [cartItems]);

// useMemo to calculate the total number of items in the cart

const totalItemsInCart = useMemo(() => {

return cartItems.reduce((total, item) => total + item.quantity, 0);

}, [cartItems]);

return (

Modern E-Commerce

</Typography>

</Badge>

</IconButton>

</Box>

{/* Products Section */}

{products.map((product) => (

{product.name}

</Typography>

${product.price.toFixed(2)}

</Typography>

</CardContent>

<Button

size="small"

variant="contained"

startIcon={<AddShoppingCartIcon />}

onClick={() => addToCart(product)}

Add to Cart

</Button>

</CardActions>

</Card>

</Grid>

))}

</Grid>

{/* Cart Section */}

Shopping Cart

</Typography>

{cartItems.length === 0 ? (

<Typography>Your cart is empty.</Typography>

) : (

<List>

{cartItems.map((item) => (

<ListItem

key={item.id}

secondaryAction={

<IconButton edge="end" aria-label="delete" onClick={() => removeFromCart(item.id)}>

</IconButton>

}

<ListItemText

primary={item.name}

secondary={`Quantity: ${item.quantity} - $${(item.price * item.quantity).toFixed(2)}`}

</ListItem>

))}

<ListItemText

primary={<Typography variant="h6">Total:</Typography>}

secondary={<Typography variant="h6">${cartTotal.toFixed(2)}</Typography>}

</ListItem>

</List>

)}

</Paper>

</Grid>

</Container>

);

}

export default App

Dissecting the Hooks and Functionality

Our shopping cart app effectively uses modern React Hooks to create a smooth and efficient user experience:

1. useState`: `useState([])` is the heart of our cart, holding an array of item objects. Each time an item is added or removed, this state is updated, triggering a re-render to reflect the changes.

2. useEffect: We use this hook for persistence.

* One `useEffect` runs on the initial component mount (thanks to `[]`) to check `localStorage` for a previously saved cart, ensuring users don't lose their items when they refresh the page.

* A second `useEffect` runs whenever `cartItems` is modified, saving the latest version to `localStorage`.

3. This hook is a key performance optimization. By wrapping `addToCart` and `removeFromCart` in `useCallback`, we ensure these functions are not recreated on every render. This is crucial in larger apps where these functions might be passed as props to many child components, preventing unnecessary re-renders.

4. useMemo`: This hook is perfect for expensive calculations. We use it to compute the `cartTotal` and `totalItemsInCart`. These values are only recalculated when the `cartItems` array changes, not on every single render. This prevents redundant computations and keeps the UI snappy.

Conclusion

Congratulations! You've just built a robust and scalable React shopping cart application using a powerful, modern tech stack. By integrating **MUI** for components and **Tailwind CSS** for styling, you've seen how quickly a professional-grade UI can be assembled. Most importantly, your use of React Hooks—`useState`, `useEffect`, `useCallback`, and `useMemo`—demonstrates a deep understanding of modern state management and performance optimization in React.

This project serves as an excellent foundation. You can now expand on it by implementing features like quantity adjustments in the cart, a multi-page checkout flow, or fetching products from a real API. The skills you've learned here are directly applicable to building complex, real-world e-commerce applications. Happy coding

Search This Blog

Captain Danko’s JavaScript Lab — Code Smarter with Tutorials, Frameworks & Dev Insights