Migration
Migrating from WFP UI-Kit or WFP Bridge?
Design systems comparison
World Food Programme has maintained several design systems over the years. The following comparison table helps you choose the right one for your project.
| WFP UI-Kit | WFP Bridge | WFP Design System | |
|---|---|---|---|
| Website | uikit.wfp.org | bridge.designsystem.wfp.org | designsystem.wfp.org |
| Launched | 2015 | 2023 | 2025 |
| Status | ❌ Deprecated | ⚠️ Maintenance mode | ✅ Active development |
| Description | Custom component library borrowing heavily from Carbon Design System. | Evolution of WFP UI-Kit, adding TypeScript support and technical updates. | A new foundation, built on shadcn/ui. |
| Distribution | External dependency | External dependency | Components copied locally |
| Installation | npm install @wfp/ui | npm install @wfp/react | See Installation |
| React version | React 17.x | React 18: Recommended for best compatibility. React 19: Initial peer dependency support. | React 19 |
| TypeScript | JavaScript only | Full TypeScript support | Full TypeScript support |
| Styling | SCSS | SCSS | Tailwind CSS v4+ |
| Primitives | Carbon Design System | Carbon Design System | Radix UI |
| Accessibility | ⚠️ Partial | ⚠️ Partial | ✅ WCAG AA compliant |
Component mapping
Find equivalent UI components in WFP Design System.
These are general recommendations, not a strict one-to-one mapping.
Migration example
As a reference for matching old UI-Kit patterns to new components, and things to look out for, here’s an example of a WFP UI-Kit application that was rebuilt with WFP Design System, along with various UX improvements: