Skip to content
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
package.json 4.0.0-beta.16 Aug 31, 2019

GitHub license Build status npm version npm downloads

Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects

  • Style elements using either Sass or JavaScript (learn more)
  • Make cosmetic UI updates to your app without modifying source code (learn more)
  • Easily configure modules and create themes for your app (learn more)
  • Add UI interactions without requiring class components, hooks or state (learn more)
  • Everything you need to create component libraries/UI styleguides
Useful Wiki Pages
Synergy Boilerplate (Javascript Styles) Synergy Boilerplate (Sass Styles)

60 Second Accordion From Scratch

npm install --save react react-dom @onenexus/synergy;

View a live demo of this example in CodeSandbox

import React, { useState } from 'react';
import '@onenexus/synergy';

const styles = {
  'font-family': 'sans-serif',

  panel: panel => ([
      condition: () =>'open'),
      styles: {
        heading: {
          'background': '#00FFB2',
          'color': '#FFFFFF'

  heading: {
    'background': '#1E90FF',
    'color': '#005A9C',
    'padding': '1em',
    ':hover': {
      'background': '#01BFFF',
      'color': '#FFFFFF'

  content: content => ({
    'padding': '1em',
    'color': '#444444',
    'display': content.parent('panel').is('open') ? 'block' : 'none'

const Accordion = ({ panels }) => (
  <Module name='accordion' styles={styles}>
    {{ heading, content }) => {
      const [isOpen, toggle] = useState(false);

      return (
        <Component name='panel' open={isOpen}>
          <Component name='heading' content={heading} onClick={() => toggle(!isOpen)} />
          <Component name='content' content={content} />

export default Accordion;
import React from 'react';
import ReactDOM from 'react-dom';
import Accordion from './accordion.jsx';

const data = [
    heading: 'accordion heading 1',
    content: 'lorem ipsum'
    heading: 'accordion heading 2',
    content: <p>foo bar</p>

const Screen = () => (
  <Accordion panels={data} />

ReactDOM.render(<Screen />, document.getElementById('app'));

This example is short and concise for demo purposes; for a more complete example utilising more features see the Module Example page


A Synergy module is essentially a UI component that's been broken up into the following areas of concern:

  • Configuration
  • Styles
  • Interactions
  • Interface

These are the main concerns of a UI module; Synergy allows you to work on each concern independently before bringing them together to form a Synergy module.

Synergy is ideal for creating presentational React components when using the Container Component Pattern (learn more)

For more information see the About Synergy page.

You can’t perform that action at this time.