1. Components
  2. Card

Components

Card

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

Card

   

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.

Sales

$ 34,743

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

maxWidthoptional
Description
Set the maximum width of the component.
Type
string
Default
max-w-none
hFulloptional
Description
Set the component's height behavior.
Type
boolean
Default
false
Values
true, false
shadowoptional
Description
Control a card's shadow.
Type
boolean
Default
true
Values
true, false
decorationoptional
Description
Add a decorative border to the card.
Type
string
Default
-
Values
left, top, right, bottom
decorationColoroptional
Description
Set a color to the border decoration.
Type
string
Default
blue
Values
See color section
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0