<p align="center">
    <img width="200" src="https://raw.githubusercontent.com/EightfoldAI/octuple/main/public/assets/Octuple-Logo.svg">
</p>

<h1 align="center">Eightfold Octuple Design System Component Library</h1>

<div align="center">

[![npm version](https://badge.fury.io/js/@eightfold.ai%2Foctuple.svg)](https://badge.fury.io/js/@eightfold.ai%2Foctuple) ![node](https://img.shields.io/badge/node-16.14.2-brightgreen.svg) [![codecov](https://codecov.io/gh/EightfoldAI/octuple/branch/main/graph/badge.svg?token=XSAVLS0SVP)](https://codecov.io/gh/EightfoldAI/octuple) ![Build](https://github.com/EightfoldAI/octuple/actions/workflows/build.yml/badge.svg) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

![npm package minimized gzipped size](https://img.shields.io/badge/octuple.js-337.4k-blueviolet?link=https://bundlephobia.com/package/@eightfold.ai/octuple)
![bundlesize-css-image](<https://img.shields.io/badge/@eightfold.ai/octuple/lib/octuple.css-163.5k_(gzipped)-blue?link=https://facia.dev/tools/compress-decompress/gzip-compress/>)
![bundlesize-locale-image](<https://img.shields.io/badge/@eightfold.ai/octuple/lib/locale.js-67.2k_(gzipped)-blue?link=https://facia.dev/tools/compress-decompress/gzip-compress/>)

</div>

## 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](https://eightfoldai.github.io/octuple.github.io/).

## Changelog

You can view the complete list of additions, fixes, and changes in the [change log](https://github.com/EightfoldAI/octuple/blob/main/CHANGELOG.md)

## Install

To install Octuple in your project run the following command:

Yarn

```
yarn add @eightfold.ai/octuple
```

NPM

```
npm install @eightfold.ai/octuple
```

## Usage

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

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

And import styles manually:

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

## 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.

![Get Help](https://raw.githubusercontent.com/EightfoldAI/octuple/main/public/assets/GetHelp.png)

### Create an issue on GitHub

![New Issue](https://raw.githubusercontent.com/EightfoldAI/octuple/main/public/assets/NewIssue.png)

### Pull requests

Review the guidance for pull requests and the contribution workflow in our [contributor guide](https://github.com/EightfoldAI/octuple/blob/main/src/CONTRIBUTING.md).

## License

MIT (c) 2024 Eightfold
