---
title: Process list (React) - USWDS + Tailwind
description: Show the steps of a task with a process list. See examples with
  headings, steps without body text, and custom sizing.
---

# Process list

Show the steps of a task with a process list. See examples with headings, steps without body text, and custom sizing.

## Examples

### Default

```tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'

export default function ProcessListDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Start a process</ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Proceed to the second step</ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Complete the step-by-step process</ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}
```

### With headings

Place a heading inside each title when the step represents a section of the page. Choose the heading level to fit the page structure.

```tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'

export default function ProcessListHeadingsDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title><h3>Start a process</h3></ProcessList.Title>
          <ProcessList.Description>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}
```

### No Text

```tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'

export default function ProcessListNoTextDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Start a process</ProcessList.Title>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Proceed to the second step</ProcessList.Title>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content>
          <ProcessList.Title>Complete the step-by-step process</ProcessList.Title>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}
```

### Custom Sizing

```tsx
import { ProcessList } from '@uswds-tailwind/react/process-list'

export default function ProcessListCustomSizingDemo() {
  return (
    <ProcessList.Root>
      <ProcessList.Item>
        <ProcessList.Content className="-top-2">
          <ProcessList.Title className="text-3xl">Start a process</ProcessList.Title>
          <ProcessList.Description className="text-xl">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content className="-top-2">
          <ProcessList.Title className="text-3xl">Proceed to the second step</ProcessList.Title>
          <ProcessList.Description className="text-xl">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
      <ProcessList.Item>
        <ProcessList.Content className="-top-2">
          <ProcessList.Title className="text-3xl">Complete the step-by-step process</ProcessList.Title>
          <ProcessList.Description className="text-xl">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida.</p>
          </ProcessList.Description>
        </ProcessList.Content>
      </ProcessList.Item>
    </ProcessList.Root>
  )
}
```

## Component API

Put one Item per step inside Root. Add a Title and optional Description to each Item.

### Root `<ol>`

Orders the process steps.

### Item `<li>`

Use one Item for each step in order.

### Content `<div>`

Groups the step text.

### Title `<div>`

Styles the step title; use a heading inside when the step introduces a section.

### Description `<div>`

Holds explanatory step text.