EngineeringShipping faster with a component registry
How we cut landing page build time from days to hours by treating sections as installable units.
About this component
Stat Card
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
Usage
The import and the props worth knowing about, in one place.
import { Card21 } from "@/components/beste/component/card21";
<Card21
value="98%"
label="Customer satisfaction"
delta="+2.1%"
trend="up" // "up" (default) | "down"
description="vs last quarter"
/>
<Card21
value="12k+"
label="Active teams"
tone="primary" // value: "foreground" (default) | "primary"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
98%+2.1%
Customer satisfaction
vs last quarter
Usage
import { Card21 } from "@/components/beste/component/card21";
<Card21
value="98%"
label="Customer satisfaction"
delta="+2.1%"
description="vs last quarter"
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The headline value (e.g. "98%") |
label* | string | — | Label under the value |
delta | string | — | Optional delta chip (e.g. "+2.1%") |
trend | "up" | "down" | — | Delta direction, controls its color and arrow |
description | string | — | Muted context line under the label (e.g. "vs last quarter") |
tone | "foreground" | "primary" | — | Value color |
className | string | — | Additional classes merged onto the root |
More Card components
View all CardCommunity Card
A compact community card with thumbnail, member count, and organizer row for directories and group lists.
Most popular
Pro
$19/month
For freelancers shipping client sites.
- Unlimited projects
- 1,400+ blocks and components
- Lifetime updates
- Priority support
No credit card required
Pricing Card
A complete pricing card with feature list, highlighted state, floating badge, and call to action.
Step 01: Pick a block
Browse 1,400+ sections and copy the install command for the one you like.
Step Card
A numbered step card with a ghost number, title, and description for how it works sections.
Ship in minutes
Copy a block, wire up your content, and deploy. No boilerplate, no configuration, no lock in.
Learn moreSpotlight Feature Card
A feature card with an icon tile and a cursor tracking spotlight for landing page feature grids.