How It Works

Three-step process section with numbered steps, icons, and a code snippet preview.

Get started in minutes

Three steps from zero to a production-quality UI. No accounts, no lock-in, no magic.

Add any component in seconds with a single command. No boilerplate, no configuration files.

npx particleui-cli add button

Your code, your rules. Every file lands directly in your project — fully editable, MIT licensed.

Production-ready from day one. Accessible, typed, and battle-tested across hundreds of projects.

$npx particleui-cli add how-it-works

TSX

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

export default function Page() {
  return <HowItWorks />
}

Prop	Type	Default	Required
heading	string	`"Get started in minutes"`	no
description	string	`"Three steps from zero to a production-quality UI. No accounts`	no
steps	Step[]	`defaultSteps`	no

Source filecomponents/blocks/how-it-works.tsx

Typeblock

Categoriesmarketing, blocks

npm dependencies@phosphor-icons/react

Registry deps

Claude skill—