# Workflow card
Frames an ordered pipeline. 1px dashed frame, chips, and a ghost add action. Reordering is supplied by SortableList.
Category: patterns
Name: `workflow`
Also known as: Workflow, Pipeline, Flow card, Process steps
Page: https://vlak.dev/components/workflow/
## When to use
- Editable pipelines: numbered steps with sub-items and a ghost add action.
- Builders, automations, onboarding flows.
## When not to
- Read-only progress; use Stepper.
- Deep trees; the pipeline is one row.
## Install
**React package.** Precompiled; no compiler to configure.
```sh
npm install @noorddev/vlak-react
```
```tsx
import "@noorddev/vlak-react/css";
import { Flow, FlowAdd, FlowBody, FlowNum, FlowPlus, FlowStep, FlowSub, FlowSubAdd, FlowSubs, FlowTitle } from "@noorddev/vlak-react";
```
**Vendor the source.** The StyleX leaf lands in `components/vlak/` for your compiler to own.
```sh
npx @noorddev/vlak-cli add workflow
```
**shadcn registry.** Same files, through the shadcn CLI.
```sh
npx shadcn add https://vlak.dev/r/workflow.json
```
**CSS only.** `rs-*` classes on plain markup, styled by `@noorddev/vlak/css`.
```html
1
Proposal
Scope, timeline, and fee on one page.
BriefFee+
```
## Example
```tsx
import { Flow, FlowAdd, FlowBody, FlowNum, FlowStep, FlowSub, FlowSubAdd, FlowSubs, FlowTitle } from "@noorddev/vlak-react";
1ProposalScope, timeline, and fee on one page.BriefFee+Add a step
```
## Props
### Flow
Dashed 1px pipeline.
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLDivElement`.
No props of its own.
### FlowAdd
Extends `ButtonHTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLButtonElement`.
No props of its own.
### FlowBody
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLParagraphElement`.
No props of its own.
### FlowNum
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLSpanElement`.
No props of its own.
### FlowPlus
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLSpanElement`.
No props of its own.
### FlowStep
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLDivElement`.
No props of its own.
### FlowSub
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLSpanElement`.
No props of its own.
### FlowSubAdd
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLSpanElement`.
No props of its own.
### FlowSubs
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLDivElement`.
No props of its own.
### FlowTitle
Extends `HTMLAttributes`: every native attribute, `className`, `style`, and event handler passes through.
Forwards `ref` to the `HTMLHeadingElement`.
No props of its own.
## Keyboard
| Keys | Does |
| --- | --- |
| Tab | Moves to the add-step button |
| Enter, Space | Activates it |
## Accessibility
- FlowAdd is a native