UI
Card
Cards are a fundamental building block for compositions, such as KPI cards, forms, or sections.
Card
import { Card } from '@tremor/react';
export function CardHero() { return ( <Card className="mx-auto max-w-xs"> <p className="text-center text-slate-400">Card</p> </Card> );}Import Card
Tremor exports one component for Card.
import { Card } from '@tremor/react';
Usage example
The example below shows a Card in combination with text elements.
Sales
$34,743
import { Card, Metric, Text } from '@tremor/react';
export function CardUsageExample() { return ( <Card className="mx-auto max-w-xs" decoration="top" decorationColor="indigo" > <p className="text-tremor-default text-tremor-content dark:text-dark-tremor-content">Sales</p> <p className="text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold">$34,743</p> </Card> );}API Reference: Card
- decoration
- Add a decorative border to the card.
string
- decorationColor
- Set a color to the border decoration.
string
Theming
Card
| Element | Theme Token |
|---|---|
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Shadow boxShadowtremor-shadow-card | boxShadowtremor-shadow-card |
| Background color colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Border color (decoration) colorstremor-brand-DEFAULT | colorstremor-brand-DEFAULT |
| Ring color colorstremor-ring | colorstremor-ring |