Migration help
Migrating from WFP UI-Kit or WFP Bridge to WFP Design System?
Design systems comparison
World Food Programme has used several design systems over the years. The following 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 |
| 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. |
| Launched | 2015 | 2023 | 2025 |
| Distribution | External dependency | External dependency | Copy components from registry |
| 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
Use this table to find equivalent UI components in WFP Design System.
These are general recommendations, not a strict one-to-one mapping. This table is a work in progress.
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: