Skip to content
Agentic UI Kit
Buy

AI Workflow Edge

Agent workflow canvas where each connection shows the routing condition and animates while the run carries data.

Full screen Try a theme

Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.

About this block

What it's for

  • Agent workflow canvas where each connection shows the routing condition and animates while the run carries data.
  • No-code automation builder where if/else branches can be read without opening the node configuration panel.
  • Live execution monitor for an ETL pipeline where the active edge marks where the data is flowing right now.

For the condition must be configured through a schema-generated form rather than displayed, use AI Node Config Panel. For the nodes and their typed ports need to be represented instead of the connections, use AI Workflow Node Set.

Includes

  • Condition label
  • Animated dash on flow
  • Branch status encoding
  • Typed port badge
  • Run counter
  • Edge selection
  • Reduced motion fallback

Works with

  • Radix UI and Base UI primitives (pick the one your project uses)
  • React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
  • Your theme tokens, in light and dark mode

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI
agentic-ui add ai-workflow-edge
Installs through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/ai-workflow-edge

Used in

A standalone component: drop it into any screen.

Type
Block
Variants
Radix UI and Base UI
Themes
Light and dark
Widths
Preview it at desktop, tablet and mobile widths above.
Motion
Animated, with a reduced-motion fallback
Sample data
Ships with sample data in its own files; replace it with your own.