See it for yourself
Two live pages, one on top of the other. Scratch the cover away to reveal the 2.0 page underneath, or use the tabs to look at either version on its own — or at both side by side.
1.8 baseline (1.8.2 CSS with 1.8.1 MegaMenu JS): existing cards, grid, and hero components, without the dedicated hub identity header. This is our approximation of the same page before the Content Hub pattern existed.
2.0: the Content Hub reference pattern reconstructed in HTML from its source, using the published stylesheet. The dedicated hub header and reusable skip link are part of the shipped CSS.
A screenshot of a live www.undrr.org news article, captured 19 September 2026 — today's article layout as it is actually built, not a reconstruction.
2.0: the Article Story reference pattern, which adds the shared reading layout (.mg-reading / .mg-grid--article), a pre-footer feedback prompt and a skip link.
Left-drag to scratch; right-drag to restore. Toggle Reveal all of 2.0 to switch the full reveal.
A foundation you can build on
The published catalogue, including utilities and integrations.
Live stories to explore, adapt and build on.
Distinct identities on a shared foundation.
Landing pages, content hubs and article stories.
From stories and publications to icons and statistics.
Base definitions for colour, type, spacing and component styling.
What it offers
Cards, controls and content, working together. Switch between five UNDRR themes to see the same components take on a different identity. Try a form field, open the details, or choose Custom to make the palette your own.
Make the system your own. Adjust colours, surfaces and shape using Mangrove’s live CSS custom properties. These experimental settings are not a validated brand palette.
A closer look
Seven standout examples, ranging from contrast-preserving focus rings and mobile drill-in navigation to baseline card surfaces and clearer button sets, Mangrove 2.0 packages dozens of everyday accessibility and consistency improvements into the shared layer. Explore the side-by-side comparisons below to see what teams can adopt directly instead of carrying local patches.
Compare the card surfaces. In 1.8.2, .mg-card has no background or padding and a zero radius. In 2.0, the base card includes a background, rounded corners, shadow, and padding.
This example shifts from two core actions in 1.8 (primary and secondary) to a broader 2.0 set that includes primary, secondary, outline, and CTA treatments.
The .mg-share__button changes from a filled blue square in 1.8.2 to a transparent icon button in 2.0, with a theme-controlled corner radius and focus ring.
Click a tab on either side. In 2.0, .mg-tabs__rail and .mg-tabs__scroll add a horizontal overflow rail with edge fades. These wrappers are absent from 1.8.2 and require updated markup.
The .mg-pager__link changes from a bordered square in 1.8.2 to a borderless circle in 2.0. The line above the pager is also removed.
Both live menus start open at mobile width. Open a section to explore: 2.0 adds drill-in navigation and a Back button, plus a focus-trapped dialog and exit transition. The 1.8 baseline menu presents a flat list.
71 component entries and 405 variants and examples
Open Mangrove docs and Storybook Guidance for agents
Start with the elements, combine them into components, and give them a purpose in a page or workflow. The existing page patterns show that direction; the next ones can come from the work our teams already share.
Small building blocks: text, images, buttons, labels, and individual form controls.
Building blocks working together: cards, navigation, feedback, forms, and syndicated search. These range from simple compositions to substantial interactive features.
Layout helpers, baseline styles, and examples of fitting the system into a page. These support composition rather than define a user journey.
Three documented families bring content, layout, and components together. Richer task flows are an area to develop with colleagues.
How to implement
Agreeing on the content contract does not require every team to use the same interaction library. A team can keep React Aria, MUI, or its own controls while working from the same content and page structure. Mangrove provides HTML/CSS and React implementations to build on; the shared agreement can also guide a team’s own implementation.
What the content means, which parts belong in the pattern, and how people should move through it.
Use your programme’s voice, imagery, and theme within that structure.
Use Mangrove components where they fit, and select the interaction tools your product needs.
This simplified card uses Mangrove’s existing markup: a container, a title with a destination, and a summary.
mg-card names the component; mg-card__title names a part. This static card needs the stylesheet, with no React
runtime or hydration. Components with richer behavior have their own runtime requirements.
<article class="mg-card mg-card__vc programme-card">
<div class="mg-card__content">
<header class="mg-card__title">
<a href="/reports/resilient-cities/">Resilient cities</a>
</header>
<p class="mg-card__summary">
Guidance for planning and investing in resilience.
</p>
</div>
</article>
Load the pinned Mangrove stylesheet
in the host page. The programme-card class is local to this example.
A local class can set an exposed CSS property for one card. Here, --mg-card-border-radius changes its corners; the content
markup stays the same. The brand demo above applies the same idea at theme scale.
.programme-card {
--mg-card-border-radius: 1rem;
}In a project that already builds Tailwind, its utilities can arrange the outer grid while Mangrove styles the cards inside it. This sketch shows that division of responsibility; replace the comments with each card’s content.
<div class="grid gap-6 md:grid-cols-2">
<article class="mg-card mg-card__vc">
<!-- First card's content -->
</article>
<article class="mg-card mg-card__vc">
<!-- Second card's content -->
</article>
</div>
The mg- prefix keeps component class names distinct from utilities such as grid and gap-6. It
is not complete CSS isolation: Mangrove’s compiled bundle includes global element styles, and Tailwind’s Preflight changes base
styles too. Review resets, cascade layers, and overrides in the host application, especially when both systems style the same
element.
Implementation references: HTML/CSS integration · Hydration · Tailwind base styles
Three years of shared work leave a stable foundation to start from: reusable components, reusable page patterns, accessibility improvements, and clearer implementation guidance.
.mg-theme-{brand}, so one bundle serves every brand and a fix travels to all of them.
react-doctor checks, a modernized toolchain, and generated docs including llms.txt for agent-assisted delivery.
StatusLabel, EmptyState, FormAction, UserFeedback, and
SkipLink. MegaMenu mobile navigation drills in one level at a time, with tested back-navigation and
reduced-motion fallbacks, and unlinked cards render as plain text so appearance matches behaviour.
Start building
Explore live stories and component guidelines at mangrove.undrr.org, or use the reference context below with AI coding assistants to build accessible, on-brand UNDRR pages.
Open Mangrove docs and Storybook
Paste this into agent prompts, rules, or system instructions when generating components or pages.
# Mangrove 2.0 & UNDRR Asset Library - Coding Agent Context
Mangrove llms.txt: https://mangrove.undrr.org/llms.txt
Component Index: https://mangrove.undrr.org/ai-components/index.json
Per-Component Details: https://mangrove.undrr.org/ai-components/{id}.json
(e.g., button, card, table, tree, breadcrumb, tag, details, empty-state, stats-card)
Design Tokens (sRGB): https://mangrove.undrr.org/tokens.json
CSS Utilities: https://mangrove.undrr.org/ai-components/utilities.json
Asset Library Guide: https://assets.undrr.org/AGENTS.md
Asset Library llms.txt: https://assets.undrr.org/llms.txtThank you. If you have 2 minutes, we would benefit from additional feedback (link opens in a new window).