# @fluentui/react-card

> Card container components for Fluent UI React.

Latest version **9.7.3** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-card
pnpm add @fluentui/react-card
yarn add @fluentui/react-card
bun add @fluentui/react-card
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.7.3 |
| Published | 2026-09-21 |
| First published | 2021-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 651.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20304 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-card
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-card

## Dependencies (9)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@griffel/react](https://npm.io/package/@griffel/react.md) ^1.5.32
- [@fluentui/react-text](https://npm.io/package/@fluentui/react-text.md) ^9.6.20
- [@fluentui/react-theme](https://npm.io/package/@fluentui/react-theme.md) ^9.2.2
- [@fluentui/keyboard-keys](https://npm.io/package/@fluentui/keyboard-keys.md) ^9.0.9
- [@fluentui/react-tabster](https://npm.io/package/@fluentui/react-tabster.md) ^9.26.18
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-jsx-runtime](https://npm.io/package/@fluentui/react-jsx-runtime.md) ^9.4.6
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4

## Recent versions

- 9.7.3 (latest) — 2026-09-21
- 0.0.0-nightly-20260929-0404.1 (nightly) — 2026-09-29
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 9.0.0-rc.2 (rc) — 2023-03-10
- 9.0.0-beta.47 (beta) — 2023-02-22
- 9.0.0-alpha.18 (alpha) — 2021-10-05
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- … 1370 more at https://npm.io/package/@fluentui/react-card/versions

## README

# @fluentui/react-card

**React Card components for [Fluent UI React](https://react.fluentui.dev)**

A card is a container that holds information and actions related to a single concept or object, like a document or a contact.

## Usage

To import React Card components:

```js
import { Card, CardPreview, CardHeader, CardFooter } from "@fluentui/react-components';
```

Example Card usage:

![example of a Card component in usage](./docs/assets/card-example.png)

```jsx
import { Share16Regular, ArrowReply16Regular } from '@fluentui/react-icons';
import { Button, Body1, Caption1 } from '@fluentui/react-components';
import { Card, CardHeader, CardPreview, CardFooter } from '@fluentui/react-components';

const App = () => (
  <>
    <Card>
      <CardHeader
        image={
          <img
            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/avatar_elvia.svg"
            alt="Face of a person"
          />
        }
        header={
          <Body1>
            <b>Elvia Atkins</b> mentioned you
          </Body1>
        }
        description={<Caption1>5h ago · About us - Overview</Caption1>}
      />
      <CardPreview
        logo={
          <img
            src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/docx.png"
            alt="Microsoft Word logo"
          />
        }
      >
        <img
          src="https://raw.githubusercontent.com/microsoft/fluentui/master/packages/react-components/react-card/assets/doc_template.png"
          alt="Preview of a Word document"
        />
      </CardPreview>
      <CardFooter>
        <Button icon={<ArrowReply16Regular />}>Reply</Button>
        <Button icon={<Share16Regular />}>Share</Button>
      </CardFooter>
    </Card>
  </>
);
```

## Specification

See the [Spec.md](./Spec.md) file for background information on the design/engineering decisions of the component.

## API

For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/preview-components-card--default).

## Migration

For migration information, have a look at the [migration guide](./MIGRATION.md).

---
_Source: https://npm.io/package/@fluentui/react-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._