# UNDRR Mangrove

> UI component library for UNDRR's disaster risk reduction websites (undrr.org, preventionweb.net, mcr2030.undrr.org). Provides both React components and vanilla HTML/CSS patterns. Built with Storybook.

- Version: 1.3.3
- Package: @undrr/undrr-mangrove
- License: Apache-2.0

## Links

- Storybook: https://unisdr.github.io/undrr-mangrove/
- Repository: https://github.com/unisdr/undrr-mangrove
- npm: https://www.npmjs.com/package/@undrr/undrr-mangrove

## For AI agents

The Storybook site is a single-page app, so fetching pages directly won't give you readable content. Use the JSON files below instead.

Component index (all 65 components):
https://unisdr.github.io/undrr-mangrove/ai-components/index.json

CSS utility class reference (~168 classes):
https://unisdr.github.io/undrr-mangrove/ai-components/utilities.json

### Vanilla HTML quick start

50 of the 65 components work as plain HTML with CSS classes, no React needed. In the index, these have vanillaHtml: true. Each component's detail JSON includes a renderedHtml array with copy-pasteable HTML snippets.

1. Include the Mangrove CSS bundle (pick your theme):
   - UNDRR: https://assets.undrr.org/static/mangrove/1.3.3/css/style.css
   - PreventionWeb: https://assets.undrr.org/static/mangrove/1.3.3/css/style-preventionweb.css
   - MCR2030: https://assets.undrr.org/static/mangrove/1.3.3/css/style-mcr.css
   - IRP: https://assets.undrr.org/static/mangrove/1.3.3/css/style-irp.css

2. Fetch the component index and find what you need
3. Fetch the component's detailsUrl and use the renderedHtml examples

### React quick start

15 components require React (requiresReact: true in the index). These use D3, Leaflet, or complex state management. Import via npm: import { ComponentName } from "@undrr/undrr-mangrove".

Several React components support hydration on vanilla HTML pages via the createHydrator pattern. Check the component's reactNote field for details.

### CSS utilities

The utilities.json file lists ~168 utility classes grouped by category: layout containers, grid, responsive display, text utilities, accessibility, background colors, text colors, font sizes, animations, embed containers, and show-more patterns. All use the mg- prefix.

### Conventions

- CSS prefix: mg-
- Naming: BEM (e.g., mg-card__title, mg-button--primary)
- Themes: undrr, preventionweb, irp, mcr2030
- Locales: en, ar, my, ja (RTL supported)
- Semantic HTML, WCAG accessible

### How to use

1. Fetch https://unisdr.github.io/undrr-mangrove/ai-components/index.json
2. Find the component you need by name or description
3. Check vanillaHtml / requiresReact to know if you need React
4. Fetch its detailsUrl for rendered HTML, props, and code examples
5. For CSS utilities, fetch https://unisdr.github.io/undrr-mangrove/ai-components/utilities.json

### Source layout

- stories/Atom/          Typography, images, layout, navigation
- stories/Molecules/     SectionHeader, FooterNavigation, BodyColumn
- stories/Components/    MegaMenu, Cards, Charts, Map, Gallery
- stories/Utilities/     CSS utilities, loaders, show/more
- stories/assets/scss/   Theme stylesheets and design tokens