---
title: "步骤"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-30
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "用于向导流程、结账渠道和入门的 Tailwind CSS 步骤。具有编号图标和已完成步骤状态的水平和垂直布局。"
url: https://frutjam.com/zh-hans/components/steps
---

# 步骤组件

Steps components visualize multi-step processes, guides, or workflows by displaying sequential stages. Built with semantic HTML and flexible layouts, steps show progress through setup wizards, tutorials, and complex procedures. The Frutjam steps system supports multiple sizes, colors, structures, and completion states—ideal for form wizards, installation guides, and progress tracking.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class            | Type     | Description                                 |
| ---------------- | -------- | ------------------------------------------- |
| steps            | Base     | Container for an ordered list of steps      |
| step             | Modifier | Individual step item with a numbered marker |
| steps-horizontal | Modifier | Horizontal layout (default)                 |
| steps-vertical   | Modifier | Vertical stacked layout                     |
| step-primary     | Color    | Primary theme color marker                  |
| step-secondary   | Color    | Secondary theme color marker                |
| step-accent      | Color    | Accent theme color marker                   |
| step-neutral     | Color    | Neutral theme color marker                  |
| step-info        | Color    | Info semantic color marker                  |
| step-success     | Color    | Success semantic color marker               |
| step-warning     | Color    | Warning semantic color marker               |
| step-error       | Color    | Error semantic color marker                 |

## Basic Usage

## Steps Layout

```html
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>
```

## Step Colors

```html
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>
```

## Vertical Steps

```html
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>
```

## Steps with Description

```html
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>
```

## Responsive Steps

```html
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>
```