Eightfold Octuple Design System Component Library

About

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.

Changelog

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

Install

To install Octuple in your project run the following command:

Yarn

yarn add @eightfold.ai/octuple

NPM

npm install @eightfold.ai/octuple

Usage

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

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

And import styles manually:

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

React 19

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.

How can I contribute?

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

Reporting bugs and suggesting enhancements using Eightfold's apps and services

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

Create an issue on GitHub

Pull requests

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

License

MIT (c) 2024 Eightfold