Step Card

Step 01: Pick a block

Browse 1,400+ sections and copy the install command for the one you like.

About this component

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"
/>

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