Mangrove: the UNDRR component library

Mangrove is the component library and design system of the United Nations Office for Disaster Risk Reduction (UNDRR), used on undrr.org, PreventionWeb, MCR2030, the International Recovery Platform (IRP) and DELTA Resilience. It provides accessible, reusable UI for React and server-rendered sites.

• Storybook docs and live examples: https://mangrove.undrr.org/
• npm package: https://www.npmjs.com/package/@undrr/undrr-mangrove
• Issue tracker: https://github.com/unisdr/undrr-mangrove/issues

Quick start

Use prebuilt CSS from CDN

<link
  rel="stylesheet"
  href="https://assets.undrr.org/mangrove/2.0.0/css/style.css"
/>

Use npm package

npm install @undrr/undrr-mangrove

Upgrading from 1.x? Read the v2.0 release notes.

Package contents:

• components/ compiled React component ES modules
• css/ compiled theme stylesheets
• js/ vanilla JS utilities
• scss/ source Sass files
• fonts/ Mangrove icon font
• error-pages/ static error page templates

Choose an integration path

• CDN reference: docs/CDN-REFERENCE.md
• Vanilla HTML/CSS: Storybook "Vanilla HTML and CSS"
• Hydration for Drupal/Astro/server-rendered apps: docs/HYDRATION.md
• Sass integration: Storybook "Sass integration"
• React integration: Storybook "React integration"

Development

For full setup and workflow details, use the development guide: docs/DEVELOPMENT.md

Common commands:

yarn install
yarn storybook
yarn test
yarn lint
yarn build

Releases

• Release process: docs/RELEASES.md
• Upgrading from 1.x: v2.0 release notes (source: docs/RELEASE-2.0.md)
• GitHub releases: https://github.com/unisdr/undrr-mangrove/releases

AI and MCP integration

Mangrove publishes static metadata for coding agents after Storybook deploy:

• llms.txt: https://mangrove.undrr.org/llms.txt
• llms-editorial-manual.txt (writing/style rules and terminology only): https://mangrove.undrr.org/llms-editorial-manual.txt
• component index: https://mangrove.undrr.org/ai-components/index.json
• per-component details: ai-components/{id}.json

Guide: docs/AI-MCP-INTEGRATION.md

Documentation index

All project docs: docs/README.md

License

Components and code are Apache-2.0 licensed. The UNDRR look and feel is proprietary.

Credit

The initial Storybook setup was adapted from the UNDP Design System (MIT), with permission.