Installation

This library is designed to streamline the development of consistent, accessible, and visually aligned user interfaces across WFP applications.

1. 🚀 Create a React App with Vite

To kickstart your new project using the Bridge Library, we recommend scaffolding your app with Vite — a fast, modern build tool optimized for React development.

🛠 JavaScript Setup

For a standard JavaScript project, use the --template react flag.

To set up using npm, run:

npm create vite@latest my-app --template react

To set up using yarn, run:

yarn create vite my-app --template react

🛠 TypeScript setup(Recommended)

For a more robust development experience with type safety, use the --template react-ts flag.

To set up using npm, run:

npm create vite@latest my-app --template react-ts

To set up using yarn, run:

yarn create vite my-app --template react-ts

↩️ Using React 19

If you are upgrading an existing project or need to ensure you are on the correct version, you can install react and its dependencies manually.

To install the Kit through npm, run:

npm install react@19 react-dom@19

To install the Kit through yarn, run:

yarn add react@19 react-dom@19

For TypeScript projects, ensure the types match React 19 by installing them as development dependencies:

To install the Kit through npm, run:

npm install -D @types/react@^19 @types/react-dom@^19

To install the Kit through yarn, run:

yarn add --dev @types/react@^19 @types/react-dom@^19

After installation, verify in your package.json that react and react-dom now show versions like ^19.x.x.

2. Add the Kit as a dependency 📦

The next step is to add the Kit to your project as a dependency. You can choose to install it through a package manager like npm or yarn.

To install the Kit through npm, run:

npm install @wfp/react @wfp/styles @wfp/icons-react --save

To install the Kit through yarn, run:

yarn add @wfp/react @wfp/styles @wfp/icons-react

3. Load the Styles 🌈

This is a required step in case you want to load the full UI Kit stylesheet. You can either load the complete stylesheet or the scss files.

Import the CSS

To import the full CSS through React, first make sure to have a css loader installed, then use the following code:

import "@wfp/styles/styles.css";

Alternative: Import the SCSS

To import the full SCSS through React, first make sure to have a sass loader installed, then use the following code:

npm install @wfp/themes-core --save-dev

Or the below using yarn

yarn add @wfp/themes-core --dev

In your custom .scss file, import the theme and the components you need.

// Import all stylesheets
import '@wfp/styles';

// Use a theme
@use "@wfp/themes-core/dist/scss/default-css-theme" as defaulttheme;

:root {
  @include defaulttheme.theme-default();
}

4. Global Settings

Wrap your Application in the WFPCoreProvider to apply global settings.

import { WFPCoreProvider } from "@wfp/react";

<WFPCoreProvider>Your application</WFPCoreProvider>;

Advanced Setup

Importing only the stylesheets you need

Instead of importing all stylesheets, you can also import only the stylesheets you need. This is useful to reduce the size of your application.

// Or import only the stylesheets you need
@use "@wfp/styles/scss/themes";
@use "@wfp/styles/scss/theme";
@use "@wfp/styles/scss/reset";
@use "@wfp/styles/scss/components";

Install the latest features 🌱

Install the packages with the @alpha tag to get access to the latest features.

npm install @wfp/react@alpha  @wfp/styles@alpha