Stepper

1. 󰆚InstallAdd the package
3. 󰆚ConfigureRegister the plugin
5. 3WriteAdd pages

Import

import {
  Stepper,
  StepperList,
  StepperItem,
  StepperIndicator,
  StepperTitle,
  StepperDescription,
  StepperSeparator,
} from "@pelagornis/page/components";

Example

The preview above renders this file. Copy it into src/components/ to start from it.

src/components/StepperExample.tsx

import { Fragment, useState } from "react";
import {
  Stepper,
  StepperDescription,
  StepperIndicator,
  StepperItem,
  StepperList,
  StepperSeparator,
  StepperTitle,
} from "@pelagornis/page/components";

const steps = [
  { title: "Install", description: "Add the package" },
  { title: "Configure", description: "Register the plugin" },
  { title: "Write", description: "Add pages" },
];

export default function StepperDemo() {
  const [step, setStep] = useState(1);

  return (
    <Stepper value={step} onValueChange={setStep} className="w-full">
      <StepperList>
        {steps.map((item, index) => (
          <Fragment key={item.title}>
            {index > 0 && <StepperSeparator />}
            <StepperItem value={index}>
              <StepperIndicator>{index + 1}</StepperIndicator>
              <StepperTitle>{item.title}</StepperTitle>
              <StepperDescription>{item.description}</StepperDescription>
            </StepperItem>
          </Fragment>
        ))}
      </StepperList>
    </Stepper>
  );
}

Use in MDX

Stepper is composed from parts that share React state. Children written in MDX are rendered as separate islands, so the parts can’t reach each other. Put the composition in a .tsx file, like the example above, and import that file instead.

src/content/docs/example.mdx

---
title: Example
---

import StepperExample from "../../components/StepperExample";

<StepperExample client:load />

client:load hydrates the island on page load. Use client:visible for content far down the page.

Use in Markdoc

Markdoc tags render Astro components, and this one needs client state. Wrap the example in an .astro file that hydrates it, then register that file as a tag.

src/components/markdoc/StepperExample.astro

---
import StepperExample from "../StepperExample";
---

<StepperExample client:load />

markdoc.config.mjs

import { component, defineMarkdocConfig } from "@astrojs/markdoc/config";
import starlightMarkdoc from "@astrojs/starlight-markdoc";
import pageMarkdoc from "@pelagornis/page/markdoc";

export default defineMarkdocConfig({
  extends: [starlightMarkdoc(), pageMarkdoc()],
  tags: {
    "stepper-example": {
      render: component("./src/components/markdoc/StepperExample.astro"),
      selfClosing: true,
    },
  },
});

src/content/docs/example.mdoc

{% stepper-example /%}

Anatomy

Parts of the component and the data-refineui role each one renders.

Part	Role
root	stepper
content	stepper-content
description	stepper-description
indicator	stepper-indicator
item	stepper-item
list	stepper-list
separator	stepper-separator
separator_fill	stepper-separator-fill
separator_rail	stepper-separator-rail
separator_track	stepper-separator-track
title	stepper-title

States

States the component styles. Component states are exposed as data attributes.

Kind	States
data-state	complete current upcoming

Keyboard

Keys the component handles when it has focus.

Key	Action
Enter	activate
Space	activate

Reference

• RefineUI · Stepper for design guidance and token detail.
• Use in MDX and Use in Markdoc for the general rules.