Shadcn UI Stats Card Block
StatsCard10 is a metric card with a thick colored left border and a pill-shaped change indicator. The layout places the title and value on the left with a change badge on the right. The left border color matches the trend direction. A period label sits below the main content.
Light card surface with a prominent left border in green for positive changes or red for negative. The change badge uses a rounded pill shape with matching background tint and icon. The arrow icon points up-right or down-right to reinforce direction. The border adds visual weight and makes trend direction immediately visible even from a distance.
This card variation adds more visual emphasis to the trend direction than a simple icon. The left border accent is distinctive and helps cards stand out in dense dashboard layouts. A bolder design choice that works well when trend direction is the primary concern. Good for executive dashboards where quick scanning of up/down trends matters.
The border and badge colors stay synchronized based on the change value. Works well in rows where multiple cards show related metrics with varying trends.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
card @shadcn | Registry |