List | Material Dashboard 2 React @ Creative Tim

The CategoriesList component helps you to simply create a beautiful list of items.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

categories

Devices 250 in stock, 346+ sold
Tickets 123 closed, 15 open
Error logs 1 is active, 40 closed

// Material Dashboard 2 PRO React Examples
import CategoriesList from "examples/Lists/CategoriesList";

// Material Dashboard 2 PRO React Components
import MDTypography from "components/MDTypography";

<CategoriesList
  title="categories"
  categories={[
    {
      color: "dark",
      icon: "devices_other",
      name: "Devices",
      description: (
        <>
          250 in stock,{" "}
          <MDTypography variant="caption" color="text" fontWeight="medium">
            346+ sold
          </MDTypography>
        </>
      ),
      route: "/",
    },
    {
      color: "dark",
      icon: "settings",
      name: "Tickets",
      description: (
        <>
          123 closed,{" "}
          <MDTypography variant="caption" color="text" fontWeight="medium">
            15 open
          </MDTypography>
        </>
      ),
      route: "/",
    },
    {
      color: "dark",
      icon: "info",
      name: "Error logs",
      description: (
        <>
          1 is active,{" "}
          <MDTypography variant="caption" color="text" fontWeight="medium">
            40 closed
          </MDTypography>
        </>
      ),
      route: "/",
    },
  ]}
/>

1// Material Dashboard 2 PRO React Examples
2import CategoriesList from "examples/Lists/CategoriesList";
3
4// Material Dashboard 2 PRO React Components
5import MDTypography from "components/MDTypography";
6
7<CategoriesList
8  title="categories"
9  categories={[
10    {
11      color: "dark",
12      icon: "devices_other",
13      name: "Devices",
14      description: (
15        <>
16          250 in stock,{" "}
17          <MDTypography variant="caption" color="text" fontWeight="medium">
18            346+ sold
19          </MDTypography>
20        </>
21      ),
22      route: "/",
23    },
24    {
25      color: "dark",
26      icon: "settings",
27      name: "Tickets",
28      description: (
29        <>
30          123 closed,{" "}
31          <MDTypography variant="caption" color="text" fontWeight="medium">
32            15 open
33          </MDTypography>
34        </>
35      ),
36      route: "/",
37    },
38    {
39      color: "dark",
40      icon: "info",
41      name: "Error logs",
42      description: (
43        <>
44          1 is active,{" "}
45          <MDTypography variant="caption" color="text" fontWeight="medium">
46            40 closed
47          </MDTypography>
48        </>
49      ),
50      route: "/",
51    },
52  ]}
53/>

Props Information

Name	Type	Default	Description
title*	string		Used to set the `CategoriesList` title, its a required prop.
categories*	array		Used to set the `CategoriesList` items, it should be an `array` of objects and the objects should contain the following keys: `color`, `icon`, `name`, `description` and `route`. Its a required prop.

Categories List

Demo

categories

Props Information