build69
build69  /  Components  /  Work & Boards  /  RuleStep

RuleStep

v1.0.8Updated 27 Aug 2026

Single step block for the workflow / automation designer (trigger / condition / action). Composes into a linear or branching workflow.

Preview

Live · 13 stories
BeautifulShowcaseOpen ↗
Why this is recommendedworkflowruleautomationstep+2

A polished showcase bringing several RuleStep variations together — beautiful.

Recommended for+14
  • Workflow designer canvas
  • Automation editor
  • Rule editor (if-this-then-that)
Tags+6
workflowruleautomationstepdesignerbeautifulshowcase
Features+4
  • Trigger / condition / action variants
  • Drag handle for reordering
  • Connector dots and lines
  • Inline title + summary
  • Edit / delete actions
  • Error / warning indicators
  • i18n: labels prop overrides every built-in UI string (kind labels, insert-step popover, condition-editor copy, aria-labels) — see RuleStepLabels / DEFAULT_RULE_STEP_LABELS
Not recommended for−2
  • Static documentation (use a Card)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "RuleStep" })

Usage

import { RuleStep } from '@/components/patterns/rule-step';

<RuleStep kind="trigger" title="When invoice is created" summary="Source: Stripe" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
kind

Step kind

'trigger' | 'condition' | 'action'yes
title

Step title

stringyes
summary

Configured summary

string
labels

Override any built-in UI string — kind labels, insert-step popover, condition-editor copy, aria-labels (i18n). Merged over DEFAULT_RULE_STEP_LABELS.

Partial<RuleStepLabels>

Related