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.

🛠 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

The @wfp/react package is now compatible with React 19. Vite installs the latest version of React by default, so no downgrading is necessary.

↩️ 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

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
  • 🛠 JavaScript Setup
  • 🛠 TypeScript setup(Recommended)
  • ↩️ Using React 19
  • 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