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";

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 className="max-w-xs mx-auto" decoration="top" decorationColor="indigo">
    <Text>Sales</Text>
    <Metric>$ 34,743</Metric>
  </Card>
);

API Reference: Card