Components

Card

Cards are a fundamental building block for compositions, such as KPI cards, forms, or sections.

   

Import Card

Tremor exports one component for Card.

import { Card } from "@tremor/react";

Anatomy

How the basic component is pieced together displaying all properties with their default values.

import { Card } from "@tremor/react";

export default () => (
  <Card
    maxWidth="max-w-none"
    hFull={false}
    shadow={true}
    decoration=""
    decorationColor="blue"
    marginTop="mt-0"
  >
  </Card>
);

Usage example

The example below shows a composition of a decorated KPI card by combining a Card with a Metric and Text component.

import { Card, Metric, Text } from "@tremor/react";

export default () => (
  <Card maxWidth="max-w-xs" decoration="top" decorationColor="indigo">
    <Text>Sales</Text>
    <Metric>$ 34,743</Metric>
  </Card>
);

API Reference: Card