Workflow Node
Visual node component for building AI workflow diagrams. Represents a single step with inputs, outputs, configuration, and connection points. Supports drag-and-drop, selection, and validation states.
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
Installation
Usage
Examples
Different Node Types
With Status Indicators
With Custom Content
Props
Note: These props are passed via the data property of each node object in the WorkflowCanvas.
| Name | Type | Default | Description |
|---|---|---|---|
labelRequired | string | — | |
labelAr | string | — | |
description | string | — | Optional description text |
descriptionAr | string | — | |
type | string | — | Node type (determines icon and styling) |
typeAr | string | — | |
icon | LucideIcon | — | |
status | 'active' | 'inactive' | 'error' | 'success' | — | |
isRTL | boolean | false | |
children | React.ReactNode | — |
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 Support
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.
Left-to-Right (LTR)
Right-to-Left (RTL)
Related Components
Canvas container for workflow nodes
Base container component
Status and type indicators