Skip to main content
react-md - Card - Installation


This package is for creating interactable cards from the material design guidelines.


npm install --save @react-md/card

It is also recommended to install the following packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/media \
  @react-md/avatar \
  @react-md/button \


import { Fragment } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Card, CardHeader, CardTitle, CardSubtitle, CardActions } from "@react-md/card"
import { Typography } from "@react-md/typography"

const App = () => (
      <CardTitle>Card Title</CardTitle>
      <Typography>Here is some text to display in the card. It is
      <Button>Action 1</Button>
      <Button<Action 2</Button>

render(<App />, document.getElementById("root"));