MongoDB — MongoDB's open-source React UI kit, in active development since 2019.
LeafyGreen UI's component packages have been published to npm since at least June 2019 (the @leafygreen-ui/palette package's first npm release is dated 2019-06-14). It has grown into an 80+ package pnpm/Turbo monorepo covering everything from form controls to a full chat-UI component set, licensed Apache-2.0.
Centralized MongoDB Design Systems team owns the monorepo; a maintainers group is auto-requested on every pull request with a documented 24-hour initial-review commitment. New components are gated on three criteria: cross-product applicability, reusable abstraction, and generalizability. Releases use semantic versioning via changesets.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
green.base
Brand/primary accent
gray.dark3
Dark neutral, used in text/background scales
red.base
Error/critical accent
black
Darkest neutral (not pure black) used as the palette's "black"
spacing[400]
Default spacing unit
borderRadius[200]
Default control/card border radius
Exactly what ships in mongodb-leafygreen-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# LeafyGreen UI — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by MongoDB. "LeafyGreen UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** LeafyGreen UI **Owner:** MongoDB **Official documentation:** https://www.mongodb.design/ --- ## Summary MongoDB's open-source React UI kit, in active development since 2019. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `green.base` | `#00ED64` | Brand/primary accent | | `gray.dark3` | `#1C2D38` | Dark neutral, used in text/background scales | | `red.base` | `#DB3030` | Error/critical accent | | `black` | `#001E2B` | Darkest neutral (not pure black) used as the palette's "black" | | `spacing[400]` | `16px` | Default spacing unit | | `borderRadius[200]` | `8px` | Default control/card border radius | ## Origin LeafyGreen UI's component packages have been published to npm since at least June 2019 (the @leafygreen-ui/palette package's first npm release is dated 2019-06-14). It has grown into an 80+ package pnpm/Turbo monorepo covering everything from form controls to a full chat-UI component set, licensed Apache-2.0. ## Governance Centralized MongoDB Design Systems team owns the monorepo; a maintainers group is auto-requested on every pull request with a documented 24-hour initial-review commitment. New components are gated on three criteria: cross-product applicability, reusable abstraction, and generalizability. Releases use semantic versioning via changesets. ## Known for - One of the largest fully open-source corporate design systems by package count — 80+ independently versioned npm packages under the @leafygreen-ui scope. - A dedicated chat-UI component family (ChatWindow, MessageFeed, MessageRating) built for MongoDB's AI-assistant surfaces. - A real, maintained CodeEditor component and Table/data-grid components built for database-admin-style interfaces. ## Underrated - The @leafygreen-ui/palette package is a clean, standalone source of MongoDB's literal brand color scales usable independent of the component library. - Governance documentation (CONTRIBUTING.md, DEVELOPER.md) is unusually explicit about review SLAs and component-acceptance criteria for a corporate design system. ## Watch out for - Components are React-only with Emotion CSS-in-JS — there's no framework-agnostic or web-components path if your stack isn't React. - Many packages carry MongoDB-specific product assumptions (chat components tied to MongoDB's AI features, database-admin-flavored Table/CodeEditor) that need real adaptation elsewhere. ## Components worth studying - **Table** — Published as @leafygreen-ui/table, MongoDB's data-grid component. - **Code** — Published as @leafygreen-ui/code — a syntax-highlighted code display/editor component. - **DatePicker** — Published as @leafygreen-ui/date-picker. ## When to choose LeafyGreen UI Pick LeafyGreen if you're building a React admin/console-style product and want a mature, genuinely open-source token and component base with real governance. Skip it if you're not on React, or if you want a system without built-in MongoDB product opinions. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of LeafyGreen UI by MongoDB — MongoDB's open-source React UI kit, in active development since 2019. Lean into what it's known for: One of the largest fully open-source corporate design systems by package count — 80+ independently versioned npm packages under the @leafygreen-ui scope. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [MongoDB Design docs](https://www.mongodb.design/) - [GitHub repo](https://github.com/mongodb/leafygreen-ui) - [Figma library 101](https://www.mongodb.design/foundation/figma-library-101) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/mongodb-leafygreen) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Pick LeafyGreen if you're building a React admin/console-style product and want a mature, genuinely open-source token and component base with real governance. Skip it if you're not on React, or if you want a system without built-in MongoDB product opinions.
Where next
