How to Use Card Component in React JS?

A few weeks ago, I was working on a dashboard project for a client in New York. The requirement was simple: display user profiles and product details in a clean, modern way. Naturally, I thought of using cards. They’re visually appealing, easy to organize, and perfect for responsive layouts.

In this tutorial, I’ll walk you through how to create and customize card components in React. I’ll show you two methods, one using Material UI (MUI) and another using custom CSS.

By the end, you’ll have a reusable card component that you can easily adapt for products, profiles, or blog posts, just like the ones you see on popular American e-commerce websites.

Table of Contents

What is a Card Component in React?

A Card component is a UI container that groups related information, like an image, title, description, and actions, into a single, cohesive block.

Cards are widely used in modern web design because they help organize data visually. Think of how Netflix displays movie thumbnails or how Amazon shows product previews; those are all card-based layouts.

In React, we can create cards using either a UI library (like Material UI) or custom CSS. Let’s explore both.

Method 1 – Create a Card Component Using Material UI

Material UI (MUI) is one of the most popular React UI libraries. It comes with prebuilt components that follow Google’s Material Design guidelines.

In this method, we’ll create a ProductCard using MUI’s Card, CardContent, CardMedia, and CardActions components.

Step 1: Install Material UI

Open your terminal in your React project folder and run the following command:

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

This installs the MUI library and its styling dependencies.

Step 2: Create the Card Component

Now, create a file named ProductCard.js inside your src/components folder. Add the following code:

import React from "react";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";

const ProductCard = ({ image, title, description, price }) => {
  return (
    <Card sx={{ maxWidth: 345, margin: "20px auto", boxShadow: 3 }}>
      <CardMedia
        component="img"
        height="200"
        image={image}
        alt={title}
      />
      <CardContent>
        <Typography gutterBottom variant="h6" component="div">
          {title}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {description}
        </Typography>
        <Typography variant="subtitle1" color="text.primary" sx={{ marginTop: 1 }}>
          ${price}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small" color="primary">Buy Now</Button>
        <Button size="small" color="secondary">Learn More</Button>
      </CardActions>
    </Card>
  );
};

export default ProductCard;

Here, I’ve used MUI’s built-in components to structure the card. Each part of the card (image, text, and actions) is modular, making it easy to reuse for different datasets.

Step 3: Use the Card in App.js

Now, open your App.js file and import the ProductCard component:

import React from "react";
import ProductCard from "./components/ProductCard";

function App() {
  return (
    <div>
      <h2 style={{ textAlign: "center" }}>Featured Products</h2>
      <ProductCard
        image="https://images.unsplash.com/photo-1606813902775-9b2e7f6b9a6a"
        title="Apple MacBook Air"
        description="Powerful performance in a sleek design. Perfect for professionals and students."
        price="999"
      />
      <ProductCard
        image="https://images.unsplash.com/photo-1517336714731-489689fd1ca8"
        title="Sony Noise Cancelling Headphones"
        description="Experience premium sound and comfort with advanced noise cancellation."
        price="349"
      />
    </div>
  );
}

export default App;

I executed the above example code and added the screenshot below.

When you run your app (npm start), you’ll see two responsive product cards displayed beautifully.

Using MUI saves a lot of design time. The components are responsive by default and look professional without much effort.

Method 2 – Create a Custom React Card Component with CSS

Sometimes, you may want a unique design that doesn’t follow Material Design rules. In that case, building your own card component from scratch is the best option.

Let’s create a ProfileCard component using plain React and CSS.

Step 1: Create the Component File

Create a new file called ProfileCard.js inside the src/components folder and add the following code:

import React from "react";
import "./ProfileCard.css";

const ProfileCard = ({ name, jobTitle, location, image }) => {
  return (
    <div className="profile-card">
      <img src={image} alt={name} className="profile-img" />
      <h3>{name}</h3>
      <p className="job-title">{jobTitle}</p>
      <p className="location">{location}</p>
      <button className="contact-btn">Contact</button>
    </div>
  );
};

export default ProfileCard;

This component displays a user’s photo, name, job title, and location, perfect for team or employee dashboards.

Step 2: Add the CSS Styling

Now, create a file named ProfileCard.css in the same folder and add the following CSS:

.profile-card {
  width: 280px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  padding: 20px;
  margin: 20px auto;
  transition: transform 0.2s ease-in-out;
}

.profile-card:hover {
  transform: translateY(-5px);
}

.profile-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.job-title {
  color: #555;
  font-size: 14px;
  margin: 5px 0;
}

.location {
  color: #777;
  font-size: 13px;
  margin-bottom: 10px;
}

.contact-btn {
  background-color: #0078d7;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
}

.contact-btn:hover {
  background-color: #005fa3;
}

This CSS gives the card a clean, modern look with subtle hover effects that make it feel interactive and professional.

Step 3: Use the ProfileCard in App.js

Add the following code to your App.js to render the profile cards:

import React from "react";
import ProfileCard from "./components/ProfileCard";

function App() {
  return (
    <div>
      <h2 style={{ textAlign: "center" }}>Our Team</h2>
      <ProfileCard
        name="Sarah Johnson"
        jobTitle="Software Engineer"
        location="San Francisco, USA"
        image="https://randomuser.me/api/portraits/women/65.jpg"
      />
      <ProfileCard
        name="David Miller"
        jobTitle="UI/UX Designer"
        location="Austin, USA"
        image="https://randomuser.me/api/portraits/men/32.jpg"
      />
    </div>
  );
}

export default App;

When you run your app, you’ll see two elegant profile cards with rounded images and interactive hover animations.

Bonus Tip – Make Cards Responsive

To make your cards responsive, wrap them inside a flex container and use media queries.

Here’s a simple example:

.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 600px) {
  .profile-card {
    width: 90%;
  }
}

This ensures that your cards look great on both desktop and mobile screens.

When to Use Each Method

Material UI Method: Best when you need quick, professional-looking cards with minimal design effort.
Custom CSS Method: Ideal when you want full control over the layout and branding.

In my experience, I often use MUI for enterprise dashboards and custom CSS for marketing websites or landing pages where design flexibility matters most.

Creating card components in React is one of the most useful skills for modern front-end developers. Whether you’re displaying products, profiles, or blog articles, cards make your UI organized and visually appealing.

The two methods I shared, using Material UI and custom CSS, cover both speed and customization. You can start with MUI for quick prototypes and switch to custom CSS for more personalized designs.

If you follow the examples above, you’ll have fully functional and reusable card components ready to integrate into any React project.

You may also read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/