Skip to content
DOL Studio

StatBlock

Design: extension Code: Code only statmetric

Live preview

Active learners

12,840

+8.2%

Avg session time

24m

-2.1%

Completion rate

78%

+1.4%

Import & files

Import
import { StatBlock } from "@/components/ui/StatBlock";
Source file
components/ui/StatBlock.tsx

Spec

Spec Props · Usage

Props

Prop Type Default Description
value string | number - —
label string - —
icon ReactNode - —

Usage

Use `text-color/neutral-stress` for numbers per color.md §4.2. Max 4 stats per row.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 2
  • Hero metric
  • Row of 3 stats

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# StatBlock
Domain: general · Category: layout
Design: extension · Code: code-only


## Description
Headline number + label for landing metrics, dashboard stats. 3–4 typography sizes only (prevent stat-page chaos).


## Import
```ts
import { StatBlock } from "@/components/ui/StatBlock";
```
Source: `components/ui/StatBlock.tsx`


## Props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string | number` | - |  |
| `label` | `string` | - |  |
| `icon` | `ReactNode` | - |  |


## Usage
Use `text-color/neutral-stress` for numbers per color.md §4.2. Max 4 stats per row.


## Examples
- **Hero metric**
- **Row of 3 stats**

Related

  • M
    audio

    Media

    Design only

  • Mockup UI (Status bar, Indicator, Browser)

    Coded
  • Section title

    Collapse

    Coded
  • Bạn đã xem hết

    Footer

    Coded

  • Card

    Code only

  • FeatureCard

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).