Step cards

Steps section with four bordered icon cards.

Usage

import { HowItWorks } from '@/components/blocks/how-it-works-01'


<HowItWorks />


// Change the copy with props
<HowItWorks
  title="Three steps to launch"
  description="Set up your workspace in minutes."
  steps={[
    { title: 'Connect', description: 'Link the tools your team already uses.' },
    { title: 'Customize', description: 'Pick a template and make it yours.' },
    { title: 'Launch', description: 'Publish and share it with one click.' },
    { title: 'Grow', description: 'Watch the results and keep improving.' },
  ]}
/>

Install

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

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

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

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

Source

Props

Step cards props
Prop	Type	Default	Description
title	string	= 'From snapshot to new room'	Heading above the steps.
description	string	= One photo is all it takes copy	Subtitle under the heading.
steps	HowItWorksStep[]	= Add a photo / Choose a style / See the new look / Tweak and keep	Steps with a title, description and optional icon. Without an icon, the built-in upload, swatch, armchair and sliders icons are used in order.
className	string	= —	Additional classes for the section.