Stats
Stats component for displaying statistics and metrics in a clean, organized layout.
Basic Example
Total Users
1,234
21% more than last month
Revenue
$45,678
12% increase
Orders
567
8% decrease
<.stats>
<:stat title="Total Users" value="1,234" desc="21% more than last month" />
<:stat title="Revenue" value="$45,678" desc="12% increase" />
<:stat title="Orders" value="567" desc="8% decrease" />
</.stats>
Vertical Layout
Page Views
89,400
21% more than last month
Unique Visitors
12,345
5% increase
<.stats horizontal={false}>
<:stat title="Page Views" value="89,400" desc="21% more than last month" />
<:stat title="Unique Visitors" value="12,345" desc="5% increase" />
</.stats>
With Dynamic Content
Active Users
2,456
Last 30 days
Total Sales
$123,456
This month
<.stats>
<:stat title="Active Users" value={@active_users} desc="Last 30 days" />
<:stat title="Total Sales" value={@total_sales} desc="This month" />
</.stats>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| horizontal | boolean | true | Layout stats horizontally or vertically |
| class | string | "" | Additional CSS classes |
| stat (slot) | slot | required |
Stat items. Each stat accepts:
|