steps

Numbered step-by-step container with vertical connecting line and CSS counters.

fumadocs/steps•v0.1.0•react, next

Preview

Install the package

Run npm install document0 in your project.

Create your content

Add MDX files to the content/ directory.

Start the dev server

Run npm run dev and visit localhost:3000.

Installation

$npx @document0/cli add fumadocs/steps

Usage

import { Steps } from "./components/fumadocs/steps";

// Example usage in your layout or page:
<Steps />

Source

After installation, this lives at components/fumadocs/steps/Steps.tsx and you can modify it however you like.

import type { ReactNode } from "react";

export function Steps({ children }: { children: ReactNode }) {
  return <div className="fd-steps">{children}</div>;
}

export function Step({ children }: { children: ReactNode }) {
  return <div className="fd-step">{children}</div>;
}