Editorial step cards

Editorial steps with three tall tinted cards.

Usage

import { HowItWorksSteps } from '@/components/blocks/how-it-works-02'


<HowItWorksSteps />


// Change the copy with props
<HowItWorksSteps
  eyebrow="Getting started"
  title="Launch in three steps"
  badge="Free to try"
  steps={[
    { title: 'Connect', description: 'Link the tools your team already uses.', meta: '2 minutes' },
    { title: 'Configure', description: 'Pick a template and make it yours.', meta: '10 minutes' },
    { title: 'Launch', description: 'Publish and share it with one click.', meta: 'One click' },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/how-it-works-02

npx shadcn@latest add @pastaui-pro/how-it-works-02

yarn dlx shadcn@latest add @pastaui-pro/how-it-works-02

bunx --bun shadcn@latest add @pastaui-pro/how-it-works-02

Source

Props

Editorial step cards props
Prop	Type	Default	Description
eyebrow	string	= 'How it works'	Small label in the top left corner.
title	string	= 'Three steps to a page you love'	Large heading above the steps.
description	string	= Pick it, make it yours and ship it copy	Subtitle under the heading.
badge	string	= 'Ready in minutes'	Text on the scalloped sticker. Pass an empty string to hide it.
steps	HowItWorksStepsItem[]	= Pick a block / Make it yours / Ship it	Steps with a title, description and optional meta shown at the bottom right. Card colors and corner shapes repeat in order.
className	string	= —	Additional classes for the section.