---
title: "Steps"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Steps for wizard flows, checkout funnels, and onboarding. Horizontal and vertical layouts with numbered icons and completed step states."
url: https://frutjam.com/zh-hant/components/steps
---

# Steps Component

步驟組件透過顯示連續階段來視覺化多步驟流程、指南或工作流程。步驟採用語意 HTML 和靈活的佈局構建，透過設定精靈、教學課程和複雜的過程顯示進度。 Frutjam 步驟系統支援多種尺寸、顏色、結構和完成狀態，非常適合表單精靈、安裝指南和進度追蹤。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級               | 類型  | 描述            |
| ---------------- | --- | ------------- |
| steps            | 根據  | 有序步驟清單的容器     |
| step             | 修飾符 | 帶有編號標記的單一步驟項目 |
| steps-horizontal | 修飾符 | 水平佈局（預設）      |
| steps-vertical   | 修飾符 | 垂直堆疊佈局        |
| step-primary     | 顏色  | 主要主題顏色標記      |
| step-secondary   | 顏色  | 次要主題顏色標記      |
| step-accent      | 顏色  | 強調主題顏色標記      |
| step-neutral     | 顏色  | 中性主題顏色標記      |
| step-info        | 顏色  | 訊息語意顏色標記      |
| step-success     | 顏色  | 成功語意顏色標記      |
| step-warning     | 顏色  | 警告語意顏色標記      |
| step-error       | 顏色  | 錯誤語意顏色標記      |

## 基本用法

## 步驟佈局

```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>
```

## 階梯顏色

```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>
```

## 垂直台階

```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>
```

## 步驟及說明

```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>
```

## 響應步驟

```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>
```