WFP UI-Kit substitutes

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 these WFP UI-Kit components:

• Card
• AspectRatio
• 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

Numeric inputs can be implemented in multiple ways. The first example demonstrates a basic number input, while the second implements manual increment/decrement controls. 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

The Collapsible component provides the same show/hide functionality as a dedicated ReadMore component. 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. This approach achieves a similar user experience without needing a dedicated ReadMore component.

Search

Search functionality illustrates <InputGroup> usage, combining input fields with icons, buttons, and other addons.

InputGroup is flexible and supports various configurations. Explore additional examples in the documentation.

StepNavigation

Step-by-step workflows can be built using Stepperize, a lightweight, type-safe stepper library. Below are horizontal and vertical layout variations.

SubNavigation

For sub-level page navigation, use NavigationMenu to compose a horizontal list of related links with active-state support.

NavigationMenu gives you the same core behaviour as a dedicated subnavigation component while keeping implementation flexible and composable.

See Navigation Menu for the full documentation.

Unit

See Numbers and units.

User

The User component is essentially a combination of an avatar and text content. <Item> provides a structured way to display an image alongside content, making it an ideal fit for user profiles.

For more details, check the documentation for each component:

• Avatar
• Item

Wrapper

Instead of a dedicated WFP UI-Kit Wrapper component, use Tailwind’s container utility for responsive page-width constraints.

export function PageSection() {
  return (
    <section className="container mx-auto px-4 md:px-6 lg:px-8">
      <h2 className="text-xl font-semibold">Section title</h2>
      <p className="text-muted-foreground">Section content goes here.</p>
    </section>
  );
}