Workflow

A timeline-style component for visualizing sequential steps or processes. Perfect for onboarding flows, installation guides, and multi-step procedures. Features customizable icons, disabled states, and clean vertical layout.

Install

pnpm dlx hybrid-astro-ui@latest add workflow

npx hybrid-astro-ui@latest add workflow

yarn dlx hybrid-astro-ui@latest add workflow

bunx hybrid-astro-ui@latest add workflow

Usage

---
import { 
    Workflow, 
    WorkflowItem, 
    WorkflowTitle, 
    WorkflowDescription, 
    WorkflowContent 
} from "@/src/components/hybrid-astro-ui/workflow";

import User from "@lucide/astro/icons/user";
import Key from "@lucide/astro/icons/key";
import AppWindow from "@lucide/astro/icons/app-window";
import BadgeCheck from "@lucide/astro/icons/badge-check";
---
<Workflow>
  <WorkflowItem>
    <Key slot="wf-icon" />

    <WorkflowContent>
      <WorkflowTitle>Step 1: Sign Up</WorkflowTitle>
      <WorkflowDescription>
        Create an account by providing your email and setting a password.
      </WorkflowDescription>
    </WorkflowContent>
  </WorkflowItem>

  <WorkflowItem>
    <User slot="wf-icon" />

    <WorkflowContent>
      <WorkflowTitle>Step 2: Profile Setup</WorkflowTitle>
      <WorkflowDescription>
        Fill in your personal details to complete your profile.
      </WorkflowDescription>
    </WorkflowContent>
  </WorkflowItem>

  <WorkflowItem>
    <AppWindow slot="wf-icon" />

    <WorkflowContent>
      <WorkflowTitle>Step 3: Start Using the App</WorkflowTitle>
      <WorkflowDescription>
        Explore features and start using the application to its full potential.
      </WorkflowDescription>
    </WorkflowContent>
  </WorkflowItem>

  <WorkflowItem disabled>
    <BadgeCheck slot="wf-icon" />

    <WorkflowContent>
      <WorkflowTitle>Step 4: Upgrade to Premium</WorkflowTitle>
      <WorkflowDescription>
        Unlock additional features by upgrading to a premium plan.
      </WorkflowDescription>
    </WorkflowContent>
  </WorkflowItem>
</Workflow>

Props & Slots

Workflow

• class (optional) — string
  Extra classes for the workflow wrapper.

WorkflowItem

• class (optional) — string
  Extra classes for the item container (in addition to the default layout styles).

• disabled (optional) — boolean
  When enabled, applies a disabled appearance: reduced opacity, disables interaction with
  pointer-events-none, and adds a dashed line-through decoration.

Slots

• slot="wf-icon"

  Named slot for the step icon (e.g. a Lucide icon).

• Default slot
  The step body content (commonly WorkflowContent).

WorkflowContent

• class (optional) — string
  Wrapper for the step content.

WorkflowTitle

• class (optional) — string
  Extra classes for the title text.

WorkflowDescription

• class (optional) — string
  Extra classes for the description text.