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.

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

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

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.

This library requires TailwindCSS to be installed in your project.

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

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;

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";

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: "",
        },
      ],
    }),
  ],
});

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;

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

npm i -D autoprefixer

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

npm ci

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

npm run storybook

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

npm run build

cd packages/ui
npm link

In target project:

npm link @openbb/ui

Then build UI after any change:

npm run build

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.

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.

Then, run this command:

npm run publish-packages

and commit bumped versions.