WFP UI-Kit alternatives

Hero

Recommended alternative for WFP UI-Kit Hero:

A hero section is often unique to each application, so there isn’t a one-size-fits-all component for it. However, you can easily create hero sections using a combination of layout components, typography, and media elements.

Here are a few variations that can be built using Card, Aspect Ratio, and Item:

PreviewCode

Emergency Food Assistance in Crisis Areas

Supporting families with food, nutrition, and resilience programmes where needs are highest.

PreviewCode

Building Resilience Through Food Security

Communities are supported to overcome food insecurity through emergency assistance during crises and long-term resilience programmes.This approach combines immediate relief with sustainable solutions, helping people recover and thrive.

NumberInput

Recommended alternative for WFP UI-Kit NumberInput:

Numeric inputs can be implemented in multiple ways. The first example demonstrates a basic Input type number, while the second implements manual increment/decrement controls using Input Group.

Both approaches are valid and can be chosen based on your application’s requirements.

For additional features such as validation, error handling, or custom styling, integrate the input with the Field component to create a more reliable and user-friendly number input experience.

ReadMore

Recommended alternative for WFP UI-Kit ReadMore:

The Collapsible component provides the same show/hide functionality; it allows content to be toggled based on user interaction, which is the core behaviour needed for read-more patterns.

This pattern can be implemented by chunking text based on character or word count, and conditionally rendering the "Read more" button based on content length.

StepNavigation

Recommended alternative for WFP UI-Kit StepNavigation:

Use Stepperize, a lightweight, type-safe stepper library. Below are horizontal and vertical layout variations.