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
- 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
CalloutData Bars