UI component
StatCard
StatCard renders a KPI tile with label, value, optional icon, trend chip, and supporting description, and can act as an interactive drill-down button.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { StatCard } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Conversion rate
3.42%
Click the other tile
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| label | Short metric label rendered above the value. |
| value | Primary metric value rendered prominently in the tile. |
| icon | Optional lucide icon rendered next to the label. |
| delta | Change indicator text rendered inside a trend chip. |
| trend | Selects the trend chip icon and color tokens between up, down, and neutral. |
| onClick | When provided the tile renders as a focusable button for drill-down navigation. |
Accessibility
The interactive form renders as a native button, exposes an accessible name from ariaLabel or label, and supports keyboard focus styling.
Integration notes
Use StatCard for top-level KPIs at the head of a page. Compose multiple tiles in a responsive grid and lift drill-down behavior into your routing layer through onClick.
Optional access rules
When view access is denied the tile returns null. When view is allowed but edit is denied, the tile downgrades to a non-interactive presentation.