Skip to main content

Quickstart

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 by Synergy Codes.

Quick Start: 3-Minute Guide

📦 Installation

Use one of the commands below to add Axiom to your project:

npm install @synergycodes/axiom
pnpm add @synergycodes/axiom
yarn add @synergycodes/axiom

🎨 Import styles

Add to your style sheet or component:

@import '@synergycodes/axiom/tokens.css';
import '@synergycodes/axiom/tokens.css';

🌗 Set the theme

To make the styles use proper variables, include data-theme (light or dark) attribute in <html>:

<html data-theme="light">

🎛️ Use components

import { Input } from '@synergycodes/axiom';

// …

<Input value={value} onChange={onChange} />;

Customization

Each axiom 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;
}

Axiom css layers

Axiom uses CSS layers to separate its styles from yours. By default, CSS styles outside of any layer take precedence over what Axiom defines, so your styles will always win the specificity war. You can customize Axiom components with simple input {}.

@layer ui.component {
.separator {
/* … */
}
}

Default axiom order:

@layer ui.base, ui.component;

If you want to use layers in your code, just add them at the end.

Showcase

Workflow Builder is a frontend-focused starter app for building workflows, offering core features, best practices, and easy backend integration for faster client delivery.

https://www.workflowbuilder.io/