Stacking step deck

Steps section with a stacking card deck.

Usage

import { HowItWorksDeck } from '@/components/blocks/how-it-works-03'


<HowItWorksDeck />


// Change the copy with props
<HowItWorksDeck
  lead="Getting started"
  title="From sign-up to launch in four steps"
  steps={[
    { title: 'Sign up', description: 'Create an account with your work email.', illustration: 'workspace' },
    { title: 'Invite', description: 'Bring your teammates along with one link.', illustration: 'invite' },
    { title: 'Automate', description: 'Connect your tools and set a few rules.', illustration: 'flow' },
    { title: 'Review', description: 'Read a short report every Monday.', illustration: 'report' },
  ]}
/>

Install

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

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

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

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

Source

Props

Stacking step deck props
Prop	Type	Default	Description
lead	string	= 'Here is how it works'	First, lighter line of the heading, followed by a small blue star.
title	string	= 'Four calm steps to a workspace that runs itself'	Second, darker line of the heading.
description	string	= Set it up once copy	Short paragraph under the heading. Pass an empty string to hide it.
steps	HowItWorksDeckStep[]	= Workspace / Team / Busywork / Monday pulse	Steps with a title, description and optional illustration ('workspace', 'invite', 'flow' or 'report'). Illustrations cycle in order when left out.
initialStep	number	= 0	Zero-based index of the step shown first.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.