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.11 Work in progress:

Atoms

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

Molecules

• Menu items (SelectContent, SelectItem, DropdownMenuContent, DropdownMenuItem)
• Select (Dropdown + Menu items)
• Color picker
• Sidebar
• Chips
• Dialog (Modal)
• BaseDialog
• ConfirmDialog
• 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

Important! use YARN to install dependencies. Npm and Bun doesn't work properly.

yarn ci

Update dependencies

Use npm-check-updates to update dependencies.

ncu -u
npm i

Important! dont't update tailwindcss-radix! It should be 2.8.0 Important! @radix-ui/[email protected] is broken, use previous minor version.

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.

Caveats

App crashes after using browser's Google Translate feature

Some components may throw runtime errors when being translated. You can fix it by adding translate="no" to breaking component. Use this patch for debugging:

import { patchNode } from "@openbb/ui";
patchNode();

Read more about it: facebook/react#11538 (comment)