Bento

Bento Workflow

Pronew

Trigger, condition and action nodes on a rail, with a marker that lifts each node in turn.

TriggerNew issue opened

ConditionLabelled as bug

ActionAssign the on-call engineer

Workflows that run themselves

Chain triggers, conditions and actions, and watch every run step by step.

Installation

npx shadcn@latest add @blank-pro/bento-workflow

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoWorkflow } from "@/components/ui/bento-workflow"

<BentoWorkflow
  steps={[
    { label: "Trigger", description: "New issue opened", icon: <ZapIcon /> },
    { label: "Condition", description: "Labelled as bug", icon: <FunnelIcon /> },
    { label: "Action", description: "Assign the on-call engineer", icon: <UserPlusIcon /> },
  ]}
/>

The marker steps through the nodes for as long as the card is on screen, which reads as a workflow that is running. Off screen it stops; under reduced motion it rests on the last node.