OpenBB Design System

Created on top of Figma Styleguide and Components. Most of the components are based on shadcn/ui which is based on Radix UI. You can find more information and examples there.

0.8 Work in progress:

Atoms

• Avatar
• Button
• Checkbox
• CopyButton
• RadioGroup
• Toggle
• Scroll bar
• Dropdown (SelectTrigger, DropdownItem)
• Tag
• Background
• Tooltip & Popover
• Loader
• Input

Molecules

• Menu items (SelectContent, SelectItem, DropdownMenuContent, DropdownMenuItem)
• Select (Dropdown + Menu items)
• Color picker
• Sidebar
• Chips
• Dialog (Modal)
• BaseDialog
• ConfirmDialog
• Tab
• Error
• Toast message (Alert)
• Calendar

Compatibility

This library is compatible with React 18+.

For bundle tool, please use Vite 4 or 5. Other bundlers haven't tested and might cause errors because of ES6 modules. Type hints are available for TypeScript users with .d.ts files generated by tsup.

Installation

Step 1: Install the package

This library requires TailwindCSS to be installed in your project.

npm i -S @openbb/ui tailwindcss tailwindcss-animate

Step 2: Add TailwindCSS to your project

Modify tailwind.config.ts:

import type { Config } from "tailwindcss";
import conf from "@openbb/ui/tailwind.config";

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx,mdx}",
    "./node_modules/@openbb/ui/dist/**/*.{js,jsx,ts,tsx}",
  ],
  presets: [conf],
  theme: {
    extend: {
      // ... you can override tailwind things here
    },
  },
} satisfies Config;

Step 3: Import styles

Modify your index.css:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "@openbb/ui/dist/lib.css";

@layer base {
  /* Overriding code here */
}

Add fonts as a separate CSS chunk:

import "@openbb/ui/dist/fonts.css";

Step 4: Copy icons spritemap

And finally, copy icon assets to your public folder. Example for vite.config.ts:

npm i -D vite-plugin-static-copy

import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
  // ...
  plugins: [
    react(),
    viteStaticCopy({
      targets: [
        {
          src: "./node_modules/@openbb/ui/dist/assets",
          dest: "",
        },
      ],
    }),
  ],
});

Step 4 (alternate): Import spritemap as a link

If your bundler does not support copying assets, you can override Icon.defaultUrl somewhere in your root code:

import { Icon } from "@openbb/ui";
import spritemapUrl from "@openbb/ui/dist/assets/spritemap.svg";
Icon.defaultUrl = spritemapUrl;

Step 5: PostCSS

Make sure your postcss.config.js contains the following plugins:

npm i -D autoprefixer

export default {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

Development

Install dependencies

npm ci

Update dependencies

Use npm-check-updates to update dependencies.

ncu -x eslint-plugin-unused-imports -u
npm i

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

Storybook

npm run storybook

Note: If the story book is not working, use the following command:

npm run build

Link to another project

cd packages/ui
npm link

In target project:

npm link @openbb/ui

Then build UI after any change:

npm run build

Publish

CHANGELOGs

On every sufficient commit (fix, feat) you need to create a changeset. Follow instructions in terminal, pick modified packages and bump versions:

npx changeset

Keep in mind that if you change code in common package, you need to bump version of all packages that depend on it.

Test on Chromatic (will be removed after CI integration)

Before making a PR, please test your changes on Chromatic:

npm run chromatic

If some tests failed and you know why, you need to review and approve changes by the following link.

Publish packages

Then, run this command:

npm run publish-packages

and commit bumped versions.