Eightfold Octuple Design System Component Library

Octuple creates a shared language and visual consistency across different pages and channels. It represents a collection of assets, utilities, and React components for building web applications.

• Design and development work may be created and replicated quickly at scale.
• Alleviates strain on design resources to focus on larger, more complex problems.
• Creates a unified language within and between cross-functional teams.
• Creates visual consistency across products, channels, and potentially siloed departments.
• Serves as an educational tool and reference for designers and content contributors.

Visit the Octuple Storybook site.

You can view the complete list of additions, fixes, and changes in the change log

To install Octuple in your project run the following command:

Yarn

yarn add @eightfold.ai/octuple

NPM

npm install @eightfold.ai/octuple

import { Button } from '@eightfold.ai/octuple';

export const App = () => (
  <>
    <Button text={'Button'} />
  </>
);

And import styles manually:

import '@eightfold.ai/octuple/lib/octuple.css';

Octuple supports React 16.8 and up, including React 19. Components need no extra setup.

The one exception is DialogHelper, which renders imperatively. React 19 removed ReactDOM.render, so a React 19 app has to tell Octuple how to render. Register a renderer once at startup, before any DialogHelper call:

import { unstableSetRender, createRootRenderer } from '@eightfold.ai/octuple';
import { createRoot } from 'react-dom/client';

unstableSetRender(createRootRenderer(createRoot));

Without it, DialogHelper.show() logs the setup step and does nothing. createRootRenderer caches one root per container, so re-showing a dialog on the same container updates it in place rather than remounting. A custom renderer is fine as long as it does the same:

unstableSetRender((node, container) => {
  // Must reuse an existing root for this container.
  const root = getOrCreateRoot(container);
  root.render(node);
  return () => root.unmount();
});

On React 18 and below nothing needs registering — the legacy path is used automatically.

There are many ways to contribute to the Octuple project. Review the following sections to find out which one is right for you.

Please use the 'Get Help' tool at the bottom of any screen to submit bugs and suggestions.

Review the guidance for pull requests and the contribution workflow in our contributor guide.

MIT (c) 2024 Eightfold