StatsCard
A card component for displaying a single metric with optional trend indicator. Perfect for dashboards and overview pages.
Features
- Display single metric with label and value
- Optional trend indicator (up/down)
- Customizable colors
- Optional icon display
- Click events for interaction
- Responsive design
Examples
Basic StatsCard
Total Revenue
$124,532.89
<script>
import { StatsCard } from '$lib';
</script>
<StatsCard label="Total Revenue" value="$124,532.89" color="primary" />With Trend Indicator
Total Users
2,543
12.5%
<StatsCard
label="Total Users"
value="2,543"
trend="up"
trendValue="12.5%"
color="success"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | Required | Card label/title |
value | string | number | Required | Metric value to display |
trend | 'up' | 'down' | undefined | Trend direction indicator |
trendValue | string | number | undefined | Trend value to display |
color | string | 'primary' | Card color theme |
icon | string | undefined | Icon identifier |
Events
| Event | Detail | Description |
|---|---|---|
onclick | void | Fired when card is clicked |
Best Practices
- Use for key metrics in dashboards
- Include trend indicators for context
- Use consistent colors across related metrics
- Keep labels concise and meaningful