Components
Key Metrics
$2MARR
500+Customers
98%Retention
Installation
$ pnpm dlx shadcn@latest add @slidecn/stat-slide
Usage
import StatSlide from "@/components/slides/stat-slide";
function MyPresentation() {
return (
<Deck>
<StatSlide
title="Growth"
layout="grid"
stats={[
{ value: "10K", label: "Users", description: "Monthly active" },
{ value: "3x", label: "Growth", description: "Year over year" },
]}
/>
</Deck>
);
}API Reference
StatSlide
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Slide heading |
stats | Stat[] | required | Array of statistics |
layout | "single" | "row" | "grid" | "single" | Layout arrangement |
notes | string | - | Speaker notes |
Stat
| Field | Type | Description |
|---|---|---|
value | string | The statistic value |
label | string | Label for the statistic |
description | string | Optional description |