Skip to content
docs-sitekit
Get started

Menu

Type to search the docs.

↑ ↓ move · Enter open · Esc close

FlowDiagram

Steps in a row that stack on small screens.

Preview

  1. Define
    Idea
    Refine
  2. Build
    Code
    Implement
  3. Ship
    Go
    Live
src/examples/flow-diagram/example.astro
---
import { FlowDiagram } from "@/presentation/components/site/flow-diagram";
---

<FlowDiagram
  steps={[
    { label: "Define", title: "Idea", detail: "Refine" },
    { label: "Build", title: "Code", detail: "Implement" },
    { label: "Ship", title: "Go", detail: "Live" },
  ]}
/>

Add to your site

npx docs-sitekit add flow-diagram

It writes these files, and keeps a file you changed:

  • src/presentation/components/site/flow-diagram.tsx

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of FlowDiagram
KeyTypeDefaultAllowed valuesDescription
stepsreadonly FlowStep[]required-The steps, in order.
Fields of FlowStep
KeyTypeDefaultAllowed valuesDescription
labelstringrequired-The phase, in mono capitals over the step.
titlestringrequired-The name of the step.
detailstring--A short line under the title.
commandstring--A command, in a mono pill under the step.

Variants and states

With a command on each step

A command in a mono pill under the step.

  1. Define
    Idea
    /spec
  2. Build
    Code
    /build
  3. Ship
    Go
    /ship
src/examples/flow-diagram/with-commands.astro
---
import { FlowDiagram } from "@/presentation/components/site/flow-diagram";
---

<FlowDiagram
  steps={[
    { label: "Define", title: "Idea", command: "/spec" },
    { label: "Build", title: "Code", command: "/build" },
    { label: "Ship", title: "Go", command: "/ship" },
  ]}
/>

About

A process as steps in a row, each with a phase, a title, a detail and a command. The steps are in a row from the md width, with a short line between them, and stacked under it.

Accessibility

  • The steps are an ordered list, so a screen reader says the position of each step.
  • The line between two steps is aria-hidden.
  • A command is plain text in a <code> element, not a control.

Source

Edit this page

Last updated