Steps

Usage

Basic Steps

The Steps component displays a sequence of instructions or actions with a visual timeline and numbered indicators.

import { Steps, Step } from "@prisma-docs/eclipse";

export function GettingStarted() {
  return (
    <Steps>
      <Step>
        ### Install dependencies
      </Step>
      <Step>
        ### Configure environment
      </Step>
      <Step>
        ### Start the server
      </Step>
    </Steps>
  );
}

Live example

With Code Blocks

Steps can contain code blocks and other rich content:

npx create-next-app@latest my-app --typescript

npm install prisma --save-dev
npx prisma init

Multi-Step Tutorial

Perfect for onboarding flows and tutorials:

With Checked Steps

Use the checked prop to mark completed steps with a checkmark icon. This is useful for showing progress in multi-step workflows.

import { Steps, Step } from "@prisma-docs/eclipse";

export function CompletedSteps() {
  return (
    <Steps>
      <Step checked active>
        #### Create account
        Account created successfully.
      </Step>
      <Step active>
        #### Verify email
        Email verified.
      </Step>
      <Step checked active>
        #### Complete profile
        Currently filling out profile information.
      </Step>
      <Step>
        #### Start using the app
        Ready to begin after profile completion.
      </Step>
    </Steps>
  );
}

With Active Steps

Use the active prop to visually highlight current or completed steps. Steps without the active prop are displayed with reduced opacity and neutral colors instead of the branded accent color, making them appear inactive.

import { Steps, Step } from "@prisma-docs/eclipse";

export function ProgressIndicator() {
  return (
    <Steps>
      <Step active>
        #### Create account
        Your account has been created successfully.
      </Step>
      <Step active>
        #### Verify email
        Email verification in progress...
      </Step>
      <Step>
        #### Complete profile
        Add your personal information (upcoming).
      </Step>
      <Step>
        #### Start using the app
        Begin exploring features (upcoming).
      </Step>
    </Steps>
  );
}

Vertical Variant

Use the variant="vertical" prop to display steps in a traditional vertical timeline layout, perfect for detailed instructions and tutorials.

import { Steps, Step } from "@prisma-docs/eclipse";

export function VerticalSteps() {
  return (
    <Steps variant="vertical">
      <Step variant="vertical">
        #### Install dependencies
      </Step>
      <Step variant="vertical">
        #### Configure environment
      </Step>
      <Step variant="vertical">
        #### Start the server
      </Step>
    </Steps>
  );
}

Steps Props

• children - Step components (ReactNode, required)
• variant - Layout variant: "horizontal" or "vertical" (default: "horizontal")

Step Props

• children - Step content, usually a heading and description (ReactNode, required)
• active - Whether the step is active/current/completed (boolean, default: false)
• checked - Whether the step is completed, displays a checkmark (boolean, default: false)
• variant - Layout variant: "horizontal" or "vertical" (should match parent Steps variant)

Prop Details

The variant prop controls the layout direction:

• "horizontal" (default) - Horizontal progress indicator layout with separators between steps
• "vertical" - Traditional vertical timeline layout with connector lines

The checked prop replaces the step number with a checkmark (✓) icon to indicate completion. This is useful for:

• Progress tracking - Show which steps have been completed
• Onboarding flows - Guide users through setup with visual feedback
• Form wizards - Indicate completed sections

The active prop visually highlights the step indicator and content to show that it's the current step, a completed step, or an important step. Steps without this prop appear dimmed to indicate they are future, optional, or not yet completed. This is useful for:

• Progress indicators - Show which steps are active/completed vs. upcoming
• Conditional workflows - Highlight required steps while dimming optional ones
• Multi-stage processes - Indicate current and completed stages in a process

Features

• ✅ Visual timeline with connector lines
• ✅ Numbered step indicators
• ✅ Checkmark indicators for completed steps
• ✅ Support for rich content (headings, code blocks, images)
• ✅ Automatic step numbering
• ✅ Active state for current or completed steps
• ✅ Vertical and horizontal layout variants
• ✅ Responsive design
• ✅ Accessible and keyboard navigable
• ✅ Based on Fumadocs Steps

Best Practices

• Use descriptive heading (h3 or h4) for each step title
• Keep step content concise and actionable
• Include code examples when relevant
• Order steps chronologically or logically
• Use 3-7 steps for optimal comprehension
• Add context or explanations after the heading
• Use checked prop to mark completed steps
• Use active prop to highlight current steps or completed actions
• Combine checked and active to create clear progress indicators
• Use horizontal variant (default) for progress indicators and short workflows
• Use vertical variant for detailed instructions and longer tutorials
• Ensure variant prop matches between Steps and Step components
• End with a clear completion or next steps

Common Use Cases

The Steps component is perfect for:

• Installation guides - Step-by-step package installation and setup
• Configuration workflows - Sequential configuration steps
• Troubleshooting guides - Ordered debugging procedures
• Onboarding flows - User onboarding sequences with progress tracking
• Migration guides - Database or system migration steps
• Tutorial sequences - Learning paths and tutorials
• Progress indicators - Show completed and upcoming steps