BBB UI Components React

This repository contains a library of reusable React components extracted from the main BigBlueButton (BBB) project. These components provide a consistent and customizable interface that can be reused in other projects, allowing them to easily adopt the BBB visual identity.

Available Components

Below is a list of the components available in this library. Each component has its own detailed documentation with usage examples and a complete list of props.

• BBBAccordion
• BBBAvatar
• BBButton
• BBBCheckbox
• BBBDivider
• BBBHint
• BBBInput
• BBBModal
• BBBNavigation
• BBBScrollArea
• BBBSearch
• BBBSelect
• BBBSlider
• BBBSpinner
• BBBTextAreaInput
• BBBTextInput
• BBBToast
• BBBToggle
• BBBTypography

Peer Dependencies

This library requires the following peer dependencies to be installed in your project:

react ^18.2.0
react-dom ^18.2.0
styled-components >=5.3.0
react-modal >=3.16.1
@emotion/react ^11.13.0
@emotion/styled ^11.13.0
@mui/material ^6.4.9 || ^7.0.0
@mui/icons-material ^6.4.9 || ^7.0.0
prop-types ^15.8.1
react-icons ^5.5.0

Make sure to install these dependencies to avoid runtime errors and ensure compatibility.

You can install all of them with the following command:

npm install react react-dom styled-components react-modal @emotion/react @emotion/styled @mui/material @mui/icons-material prop-types react-icons

Note: @tippyjs/react and tippy.js (used internally by the Tooltip) ship as regular dependencies of this library, so they're installed automatically — no need to add them yourself.

Color Customization with CSS Variables

This library supports overriding component colors using CSS custom properties (variables). You can define these variables in your project's global CSS or stylesheets to customize the appearance of components without modifying the library code. This is particularly useful for theming and maintaining consistency with your application's design system.

To use this feature:

1. Define the CSS variables in your project's root styles (e.g., in a global CSS file or via styled-components' createGlobalStyle).
2. The library's components will automatically pick up these variables if they are set on the :root element or a parent container.

Note: These variables are optional. If not defined, the components will fall back to their default styled-components theme values, which are derived from the project's src/stylesheets/palette.ts file.

Available CSS Variables

The following table lists the supported CSS variables for color overriding, extracted from src/stylesheets/palette.ts. Each variable corresponds to a specific color aspect used in the components (e.g., neutrals, brands, semantics). The "Maps to BBB Core Variable" column indicates if the variable aligns with a standard BBB core color (based on the file's comments). The "Default Value" column shows the fallback color used if the variable is not set.

Example Usage:

:root {
  --color-primary: #ff5733; /* Override primary brand color to a custom orange */
  --color-text-default: #333333; /* Darker text for better contrast */
}

If you need to override colors for specific components or add new variables, refer to the component's styles.ts file for implementation details.

Importing Color Tokens in JS

In addition to CSS variables, the same color tokens used internally by every component are also exported as a nested colors object, for use directly in JS/TS (e.g. in your own styled-components):

// From the package root
import { colors } from '@bigbluebutton/bbb-ui-components-react';

// Or from the dedicated, tree-shakeable subpath
import { colors } from '@bigbluebutton/bbb-ui-components-react/colors';

const StyledDiv = styled.div`
  color: ${colors.text.default};
  background: ${colors.background.white};
`;

colors is grouped the same way as the table above: neutral, brand, semantic, background, border, text, icon, hover, overlay, shadow, user.

Installation

You can install the library directly from npm:

npm install @bigbluebutton/bbb-ui-components-react

Local Development

If you want to build the library locally or contribute:

Building the bundle

nvm use
npm install
npm run build

Using npm link

When developing and testing locally with npm link, you may need to adjust your Webpack configuration to ensure compatibility with styled-components and react, which do not handle multiple instances well. Add the following alias configuration to the project that uses this library:

resolve: {
  alias: {
    'styled-components': path.resolve('./node_modules/styled-components'),
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom'),
  },
}