- Notifications
You must be signed in to change notification settings - Fork4
Open-source collection of ready-to-use UI components for building node-based user interfaces with React Flow.
License
synergycodes/overflow-ui
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A React library for creating node-based user interfaces and diagram-driven apps. Built to work seamlessly with React Flow, it provides a collection of ready-to-use components and templates that simplify the development of visual editors, workflows, and interactive diagrams.
Developed and maintained bySynergy Codes.
Use one of the commands below to addOverflow UI to your project:
npm install @synergycodes/overflow-ui
pnpm add @synergycodes/overflow-ui
yarn add @synergycodes/overflow-ui
Add to your style sheet or component:
@import'@synergycodes/overflow-ui/tokens.css';
import'@synergycodes/overflow-ui/tokens.css';
To make the styles use proper variables, includedata-theme (light ordark) attribute in<html>:
<htmldata-theme="light">
import{Input}from'@synergycodes/overflow-ui';// …<Inputvalue={value}onChange={onChange}/>;
Each Overflow UI component uses CSS variables that are derived from primitive values.
You can override them:
:root {--ax-ui-bg-primary-default:#40ba12;}
or a derived value used by the selected component:
:root {--ax-public-date-picker-dropdown-background:#40ba12;}
Overflow UI usesCSS layers to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Overflow UI defines, so your styles will always win the specificity war. You can customize Overflow UI components with simpleinput {}.
@layer ui.component { .separator {/* … */ }}
Default Overflow UI order:
@layer ui.base,ui.component;
If you want to use layers in your code, just add them at the end.
Workflow Builder is a frontend-focused starter app for building workflows, offering core features, best practices, and easy backend integration for faster client delivery.
About
Open-source collection of ready-to-use UI components for building node-based user interfaces with React Flow.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors9
Uh oh!
There was an error while loading.Please reload this page.