Workflow Node

Work in Progress

Base node component for workflows with handles, status indicators, icons, and badges. Automatically adjusts handle positions for RTL.

Note: This component is currently under development. Some features may not work as expected. We're actively working on improvements and will update the documentation once stable.

Preview

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

Installation

Terminalbash

Usage

Reacttsx

Examples

Different Node Types

Trigger

When email received

trigger

AI Process

Analyze content

Output

Send to Slack

action

React Flow

tsx

With Status Indicators

Active

Currently running

Success

Completed

Error

Failed

Inactive

Not running

React Flow

tsx

With Custom Content

Email Filter

Filter incoming emails

filter

Conditions:

• From: team@company.com
• Subject contains: "urgent"

React Flow

tsx

Props

Note: These props are passed via the data property of each node object in the WorkflowCanvas.

Name	Type	Default	Description
`label` Required	`string`	—	Node label/title
`labelAr`	`string`	—	Node label in Arabic (for RTL)
`description`	`string`	—	Node description text
`descriptionAr`	`string`	—	Node description in Arabic (for RTL)
`type`	`string`	—	Node type/category (shown as badge)
`typeAr`	`string`	—	Node type in Arabic (for RTL)
`icon`	`LucideIcon`	—	Icon component to display
`status`	`'active' \| 'inactive' \| 'error' \| 'success'`	—	Badge status indicator color
`isRTL`	`boolean`	`false`	Whether text direction is RTL
`children`	`React.ReactNode`	—	Custom content to render inside the node

Accessibility

Keyboard Navigation

Tab: Focus the node
Arrow Keys: Move the selected node
Delete: Delete the selected node

Screen Reader

Each node is announced with its label, description, and type. Status indicators are included in the accessible name when present.

Visual Feedback

Selected nodes show a focus ring
Status indicators use distinct colors (blue, green, red, gray)
Error and success states have colored borders

RTL Considerations

Workflow nodes automatically adjust handle positions for RTL layouts. Input handles appear on the right, output handles on the left. Set isRTL in node data and use Arabic label/description variants.