Section: How It Works

Display a step-by-step process with numbered steps, icons, and descriptions. Ideal for explaining onboarding flows, setup processes, or product usage.

Props

Name	Type	Required	Description	Default
`label`	string	No	Small label above heading	—
`heading`	string	No	Section heading	—
`description`	string	No	Section description	—
`steps`	array	Yes	Array of step objects	—
`steps[].title`	string	Yes	Step title	—
`steps[].description`	string	Yes	Step description	—
`steps[].icon`	string	No	Lucide icon name	—
`className`	string	No	Custom CSS class	—

Layout

Steps are displayed as numbered cards in a horizontal row on desktop and stacked vertically on mobile. Each step shows its number, icon (if provided), title, and description.

Recommended: Use 3-4 steps for clarity. More than 5 steps feels overwhelming and should be broken into a guide page instead.

Minimal Example

{
  "type": "how-it-works",
  "steps": [
    { "title": "Create a project", "description": "Set up your project via the API." },
    { "title": "Add pages", "description": "Create pages with JSON config." },
    { "title": "Publish", "description": "Go live with one API call." }
  ]
}

Full Example

{
  "type": "how-it-works",
  "label": "How It Works",
  "heading": "Three Steps to Launch",
  "description": "Get your site live in minutes.",
  "steps": [
    {
      "title": "Create Your Project",
      "description": "Use the API to create a project with your domain, theme, and settings.",
      "icon": "FolderPlus"
    },
    {
      "title": "Add Content",
      "description": "Create pages, write articles, and build directories — all via REST API or AI agent.",
      "icon": "PenTool"
    },
    {
      "title": "Go Live",
      "description": "Publish your pages with one call. PageGun handles SSL, CDN, and routing.",
      "icon": "Rocket"
    }
  ]
}

Writing Tips

Don't number titles (e.g., "1. Create") — the UI already shows step numbers
Start titles with a verb — "Create", "Configure", "Deploy", "Connect"
Keep descriptions action-oriented — tell the user what they'll do, not what the feature is
Show the happy path — this section should feel easy and fast

Common Patterns

SaaS Onboarding

{
  "type": "how-it-works",
  "heading": "Get Started in 60 Seconds",
  "steps": [
    { "title": "Sign Up", "description": "Create a free account. No credit card required.", "icon": "UserPlus" },
    { "title": "Connect Your Data", "description": "Import from CSV, API, or connect your database.", "icon": "Link" },
    { "title": "Launch", "description": "Your dashboard is ready. Start making decisions.", "icon": "Rocket" }
  ]
}

API Integration

{
  "type": "how-it-works",
  "heading": "Integrate in Minutes",
  "steps": [
    { "title": "Get Your API Key", "description": "Generate a key from the dashboard.", "icon": "Key" },
    { "title": "Make Your First Call", "description": "Send a POST request to create a page.", "icon": "Terminal" },
    { "title": "Go Live", "description": "Publish and share your page URL.", "icon": "Globe" }
  ]
}

Placement

Typically placed after Solution or Features, and before CTA. The narrative: What we solve → What we offer → How to use it → Get started.