openbb-ui

OpenBB Design System

Created on top of Figma Styleguide and Molecules.

Installation

This library requires TailwindCSS to be installed in your project.

npm i -S openbb-ui tailwindcss tailwindcss-animate

Then add TailwindCSS into your tailwind.config.js:

import ui from "openbb-ui/tailwind.config.js";

/** @type {import('tailwindcss').Config} */
export default {
  ...ui,
  // content: [],
  // theme: {
  //   extend: {},
  // },
  // plugins: [],
};

Development

Install dependencies

npm ci

Update dependencies

Use npm-check-updates to update dependencies.

ncu -u
npm i

Important! dont't update eslint-plugin-unused-imports! It should be 2.0.0

Storybook

npm run storybook

Link to another project

npm link

In target project:

npm link openbb-ui

Then build UI after any change:

npm run build

Publish

npm version patch
npm run build
npm publish

Chromatic (will be removed after CI integration)

npm run chromatic