BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Build an Icon
    • Contributing Guidelines
    • Developing components
    • Favicons
    • Form Design
    • How to give feedback
    • How to write UX copy
    • Install UI-Kit
    • Migration
    • PWA 📱
    • Replaceable Components
    • Start Designing
    • Support RTL
    • Themes
    • Write documentation
How Tos

Installation

The Bridge React Library @wfp/react, (formerly known as the UIKit Library @wfp/ui) provides developers with a collection of reusable React.js components, along with accompanying SCSS, CSS, HTML templates, and static assets.

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

WFP front-end technology standards

The WFP Bridge react library is build on React, in accordance with the official WFP official guidelines for software development. All WFP digital applications are expected to adopt this library to ensure consistency in user experience and branding. The only exceptions are off-the-shelf solutions (e.g. Saas) and/or non-apps (e.g. the external corporate website, and/or basic landing pages used for fundraising, etc).

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.

🛠 Recommended Setup

Use the following command to create a new Vite-powered React app:

To install the Kit through npm, run:

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

To install the Kit through yarn, run:

yarn create vite my-app --template react

Note: Vite installs the latest version of React by default, which is currently React 19. The Bridge react(@wfp/react) package currently only supports React version 18. It is not yet compatible with React 19.

↩️ Using React 18 Instead

To use the @wfp/react package successfully, you must ensure your project uses React 18. You can manually downgrade React and ReactDOM:

To install the Kit through npm, run:

npm install react@18 react-dom@18

To install the Kit through yarn, run:

yarn add react@18 react-dom@18

If you are using TypeScript (--template react-ts), you should also ensure the types match React 18 by installing them as development dependencies:

To install the Kit through npm, run:

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

To install the Kit through yarn, run:

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

Verify in package.json that react and react-dom now show versions like ^18.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

Do not use --force or --legacy-peer-deps flags to install the Bridge package with React 19 since it is unsupported and will likely cause errors.

We are working on adding React 19 support and will update this documentation once it’s available.

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 🌱

This is not recommended for production environments.

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

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

On this page

  • 1. 🚀 Create a React App with Vite
  • 🛠 Recommended Setup
  • ↩️ Using React 18 Instead
  • 2. Add the Kit as a dependency 📦
  • 3. Load the Styles 🌈
  • Import the CSS
  • Alternative: Import the SCSS
  • 4. Global Settings
  • Advanced Setup
  • Importing only the stylesheets you need
  • Install the latest features 🌱
Storybook
Figma library
Contact us
2025 © World Food Programme