Migration help
Migrating from WFP UI-Kit or WFP Bridge to WFP Design System?
Design systems comparison
There have been several WFP 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 optimal 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.
Notes
These are general recommendations, not a strict one-to-one mapping. This table is a work in progress.
Component Alternatives
Some components can be achieved by combining existing UI primitives together. We don't offer standalone versions of these components to keep the design system focused and composable. See component alternatives for practical examples of how to build these patterns.