Components
Awesome Card
A card with a hatched-stripe header and an inset content area, perfect for displaying stats and metrics.
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-awesome-cardUsage
import {
AwesomeCard,
AwesomeCardHeader,
AwesomeCardTitle,
AwesomeCardIcon,
AwesomeCardBody,
AwesomeCardValue,
AwesomeCardTrend
} from "@docyrus/ui/components/awesome-card";
<AwesomeCard>
<AwesomeCardHeader>
<AwesomeCardTitle>Total Revenue</AwesomeCardTitle>
<AwesomeCardIcon>
<DollarSign className="size-4" />
</AwesomeCardIcon>
</AwesomeCardHeader>
<AwesomeCardBody>
<AwesomeCardValue>$45,231.89</AwesomeCardValue>
<AwesomeCardTrend positive>+20.1% from last month</AwesomeCardTrend>
</AwesomeCardBody>
</AwesomeCard>Components
| Component | Description |
|---|---|
AwesomeCard | Root container with diagonal stripe background |
AwesomeCardHeader | Header section with flex layout |
AwesomeCardTitle | Title text element |
AwesomeCardIcon | Icon container in the header |
AwesomeCardBody | Inset content area with card background |
AwesomeCardValue | Large value display (e.g. metrics, stats) |
AwesomeCardTrend | Trend indicator with positive/negative coloring |
API Reference
AwesomeCardTrend
| Prop | Type | Default | Description |
|---|---|---|---|
positive | boolean | — | When true, text is green. When false, text is red. When undefined, uses muted color. |
className | string | — | Additional CSS classes |