Common Components

Step List

Ordered list component for displaying sequential steps

Quick Preview

1
Sign Up
Create your free account in seconds
2
Configure
Set up your project settings and preferences
3
Deploy
Launch your application to the world

Installation

// Copy the StepList component from
src/components/common/StepList.tsx

Usage

import { StepList } from '@/components/common/StepList'

const steps = [
  {
    title: "Sign Up",
    description: "Create your free account"
  },
  {
    title: "Configure",
    description: "Set up your project"
  },
  {
    title: "Deploy",
    description: "Launch your application"
  }
]

export default function MyComponent() {
  return <StepList steps={steps} />
}

Examples

Basic Steps

Simple 3-step process

1
Sign Up
Create your free account in seconds
2
Configure
Set up your project settings and preferences
3
Deploy
Launch your application to the world

Extended Steps

More detailed process with 5 steps

1
Sign Up
Create your free account in seconds
2
Configure
Set up your project settings and preferences
3
Deploy
Launch your application to the world
4
Monitor
Track your application performance
5
Scale
Grow your infrastructure as needed

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a common component named Step List in React/Next.js.
Goal: recreate the same overall UI and behavior as the Step List reference from a component gallery.
What it needs to communicate: Ordered list component for displaying sequential steps.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Design the component so it can be dropped into landing and application pages without refactoring.
- Preserve clear content hierarchy and comfortable spacing.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- steps: StepItem[] — required — Array of steps with title and description

Reference usage patterns:
- Step List

```tsx
<StepList
  steps={[
    {
      title: "Sign Up",
      description: "Create your free account"
    },
    {
      title: "Configure",
      description: "Set up your project settings"
    },
    {
      title: "Deploy",
      description: "Launch your application"
    }
  ]}
/>
```

Feature expectations:
- Circular step numbers with teal background
- Bold step titles
- Description text
- Clean vertical layout

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`steps`*	`StepItem[]`	-	Array of steps with title and description

StepItem Type

interface StepItem {
  title: string
  description: string
}

Features

✓Circular step numbers with teal background
✓Bold step titles
✓Description text
✓Clean vertical layout

← Back to Common Components

Step List

Quick Preview

Sign Up

Configure

Deploy

Installation

Usage

Examples

Basic Steps

Sign Up

Configure

Deploy

Extended Steps

Sign Up

Configure

Deploy

Monitor

Scale

Copy a prompt that recreates this UI

Props

StepItem Type

Features