Node editor

Pro

Boxes, ports and links you can drag, connect and tidy up. Ships with a dialogue example.

flow-editor-01 · v1.2.13 · Flows block 1 of 1

npx shadcn@latest add @lib/flow-editor-01

About this flows block

Node editor is a Pro flows block for shadcn/ui. Boxes, ports and links you can drag, connect and tidy up. Ships with a dialogue example. It's one React file built on the shadcn/ui alert, alert-dialog, Button, Dropdown menu components, uses only your theme tokens, animates in as it scrolls into view and stays still for visitors who ask for less motion, and works in Next.js, Vite, React Router, TanStack Start and Astro.

Your content goes in through props: value, defaultValue, onChange, boxTypes, actions, nodeTypes, readOnly. Leave them out and the block shows its demo content.

What's inside

Keyboard support beyond Tab
Menus and popovers
Filtering or search
Interactive state, no wiring needed to try it
Entrance animation, with a reduced-motion fallback
Light and dark mode from your theme
Responsive, from phone to desktop

What it installs

@lib/cell
@lib/icon-badge-01
shadcn/ui: alert, alert-dialog, button, command, dropdown-menu, field, input, kbd, popover, select, switch, textarea, tooltip
npm: @dagrejs/dagre, @xyflow/react, lucide-react

Versions

v1.2.13 Flow editor: opens on the whole flow
v1.2.12 Flow editor: opening frame in short canvases
v1.2.11 Flow editor: menus off the screen edge, focus kept
v1.2.10 Flow editor: one undo per deletion

Full changelog

More flows blocks

Node editors for flows inside your app: boxes, ports and links you drag and connect, for dialogues, automations and pipelines.

All 1