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
Step Card
A numbered step card with a ghost number, title, and description for how it works sections.
Usage
The import and the props worth knowing about, in one place.
import { Card20 } from "@/components/beste/component/card20";
<Card20
step="01"
title="Pick a block"
description="Browse the registry and copy the install command."
/>
<Card20
step="02"
title="Make it yours"
description="Adjust colors, spacing, and copy with Tailwind."
tone="primary" // ghost number: "muted" (default) | "primary"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Step 01: Pick a block
Browse 1,400+ sections and copy the install command for the one you like.
Usage
import { Card20 } from "@/components/beste/component/card20";
<Card20
step="01"
title="Pick a block"
description="Browse 1,400+ sections and copy the install command for the one you like."
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
step* | string | — | Step number (e.g. "01") |
title* | string | — | Step title |
description | string | — | Step description |
tone | "muted" | "primary" | — | Ghost number color |
className | string | — | Additional classes merged onto the root |
More Card components
View all Card98%+2.1%
Customer satisfaction
vs last quarter
Stat Card
A minimal stat card with a bold value, label, and optional trend delta for metrics rows.
Wish you were here. The water is unreal and the studio ideas keep coming.
With love, Selin
Alacati, TR
The Beste team
Postcard
A postcard back with a serif message, dashed stamp, postmark, and address lines for personal storytelling sections.
EngineeringArticle Card
An article card with cover image, category chip, excerpt, and author row for blog and news grids.
Ready when you are
Start building today
Copy your first block in under a minute. No account needed.
CTA Card
A call to action card with eyebrow, title, description, and buttons for section endings and banners.
We rebuilt our marketing site in a weekend. The blocks are clean, accessible, and the code reads like we wrote it ourselves.
Testimonial Card
A testimonial card with star rating, quote, and author row for reviews and social proof sections.
