Workflow card

Builds an ordered pipeline from draggable steps. 1px dashed frame, chips, and ghost add action.

Preview

Proposal

Scope, timeline, and fee on one page.

BriefFee+

In action

Pipe

The job, in order

Proposal

Scope, timeline, and fee on one page.

When to use

Use it for

Editable pipelines: numbered steps with sub-items and a ghost add action.
Builders, automations, onboarding flows.

Not for

Read-only progress; use Stepper.
Deep trees; the pipeline is one row.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Flow, FlowAdd, FlowBody, FlowNum, FlowStep, FlowSub, FlowSubAdd, FlowSubs, FlowTitle } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/workflow.

2. Vendor the source

npx @noorddev/vlak-cli add workflow

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/workflow.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Flow, FlowAdd, FlowBody, FlowNum, FlowStep, FlowSub, FlowSubAdd, FlowSubs, FlowTitle } from "@noorddev/vlak-react";

<Flow>
  <FlowStep>
    <FlowNum>1</FlowNum>
    <FlowTitle>Proposal</FlowTitle>
    <FlowBody>Scope, timeline, and fee on one page.</FlowBody>
    <FlowSubs>
      <FlowSub>Brief</FlowSub>
      <FlowSub>Fee</FlowSub>
      <FlowSubAdd>+</FlowSubAdd>
    </FlowSubs>
  </FlowStep>
  <FlowAdd onClick={addStep}>Add a step</FlowAdd>
</Flow>

Props

Flow

Dashed 1px pipeline.

Also accepts HTMLAttributes<HTMLDivElement>.

FlowAdd

Also accepts ButtonHTMLAttributes<HTMLButtonElement>.

FlowBody

Also accepts HTMLAttributes<HTMLParagraphElement>.

FlowNum

Also accepts HTMLAttributes<HTMLSpanElement>.

FlowPlus

Also accepts HTMLAttributes<HTMLSpanElement>.

FlowStep

Also accepts HTMLAttributes<HTMLDivElement>.

FlowSub

Also accepts HTMLAttributes<HTMLSpanElement>.

FlowSubAdd

Also accepts HTMLAttributes<HTMLSpanElement>.

FlowSubs

Also accepts HTMLAttributes<HTMLDivElement>.

FlowTitle

Also accepts HTMLAttributes<HTMLHeadingElement>.

Keyboard

Keys	Does
`Tab`	Moves to the add-step button
`Enter, Space`	Activates it

Accessibility

FlowAdd is a native <button>; FlowTitle is an <h4>. FlowSubAdd is a <span>: wrap it in a button when it acts.

Markup

<div class="rs-flow" style="grid-template-columns:184px;width:184px"><div class="rs-flow-step"><span class="rs-flow-num">1</span><h4>Proposal</h4><p>Scope, timeline, and fee on one page.</p><div class="rs-flow-subs"><span>Brief</span><span>Fee</span><span class="rs-flow-sub-add">+</span></div></div><button type="button" class="rs-flow-add"><span class="rs-flow-plus">+</span> Add a step</button></div>

Classes

.rs-flow.rs-flow-step.rs-flow-num.rs-flow-subs.rs-flow-sub-add.rs-flow-add.rs-flow-plus.rs-flow-body.rs-flow-sub.rs-flow-title