This is a library of re-usable React components for use in Brightlayer UI applications. For the most part, these components are meant to simplify building your application by providing drop-in components that implement common use cases in Brightlayer UI and eliminate the need for multiple teams to build their own components for these.
Refer to the Component Library API documentation site for a list of available components and the document for each individual component.
To install the Brightlayer UI react components from NPM as a dependency for your project, you can run the following command in your project root:
yarn add @brightlayer-ui/react-componentsSee the developer documentation site for detailed information on using these components.
For use with MUI 6+, you must be using version 7 of @brightlayer-ui/react-components and version 8 of @brightlayer-ui/react-themes.
With the release of version 7, Brightlayer UI React Components have been updated to use Material UI v6. The usage of the BLUI components remains the same, but there may be some updates required in your project to migrate to MUI v6.
You can refer to the official MUI Migration Documentation for details on the steps to upgrade. This will include:
- updating dependency versions
- updating any custom themes (BLUI themes have already been updated for you)
- component API changes / deprecations
Brightlayer UI libraries will work with any modern browser. For details, please refer to our Browser Support documentation.
To work with this library, first clone down the repository and install dependencies:
git clone https://github.com/etn-ccis/blui-react-component-library
cd react-component-library
yarn initializeThe library can be built by running the following command. The resulting output will be in the /dist folder.
yarn buildThis repository comes with a demo project found within the /demos folder.
The Showcase project (from react-showcase-demo) that shows a combination of components in the context of a realistic interface.
The react-showcase-demo is deployed as part of the Brightlayer UI continuous integrations.
The second project found within the /docs folder is the React Component Library API documentation that allows you to see the components in isolation and interact with their properties.
The React Component Library is deployed as part of the Brightlayer UI continuous integrations.
You can build, link, and start the applications in a single step by running
yarn start:showcaseor
yarn start:docsfrom the root directory.