https://github.com/mongodb/leafygreen-ui
LeafyGreen UI – LeafyGreen's React UI Kit
https://github.com/mongodb/leafygreen-ui
design-system emotion mongodb react ui-kit
Last synced: 5 months ago
JSON representation
LeafyGreen UI – LeafyGreen's React UI Kit
- Host: GitHub
- URL: https://github.com/mongodb/leafygreen-ui
- Owner: mongodb
- License: apache-2.0
- Created: 2018-11-08T01:14:44.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2025-04-09T23:03:29.000Z (about 1 year ago)
- Last Synced: 2025-04-10T09:09:08.771Z (about 1 year ago)
- Topics: design-system, emotion, mongodb, react, ui-kit
- Language: TypeScript
- Homepage: https://www.mongodb.design
- Size: 113 MB
- Stars: 226
- Watchers: 200
- Forks: 67
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
LeafyGreen UI
A library of React components, CSS patterns, and CLI tools for MongoDB's LeafyGreen Design System.
## Getting Started
### With LeafyGreen CLI
1. Create or open a React project
2. Install the LeafyGreen CLI
```bash
npm install -g @lg-tools/cli
```
3. Install all, or some LeafyGreen components
```bash
lg install
```
```bash
lg install button combobox
```
3. Import LeafyGreen components into your project
```tsx
import Button from '@leafygreen-ui/button';
import { Combobox, ComboboxOptions } from '@leafygreen-ui/combobox';
```
### Without CLI
1. Create or open a React project
2. Install individual LeafyGreen components using `npm`, `pnpm`, or `yarn`
```bash
pnpm add @leafygreen-ui/button
```
3. Import LeafyGreen components into your project
```tsx
import Button from '@leafygreen-ui/button';
```
## Packages
| Package | Latest | Downloads | Live Example |
| -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| [@leafygreen-ui/a11y](./packages/a11y) | [](https://www.npmjs.com/package/@leafygreen-ui/a11y) |  | [Live Example](http://mongodb.design/component/a11y/live-example) |
| [@leafygreen-ui/avatar](./packages/avatar) | [](https://www.npmjs.com/package/@leafygreen-ui/avatar) |  | [Live Example](http://mongodb.design/component/avatar/live-example) |
| [@leafygreen-ui/badge](./packages/badge) | [](https://www.npmjs.com/package/@leafygreen-ui/badge) |  | [Live Example](http://mongodb.design/component/badge/live-example) |
| [@leafygreen-ui/banner](./packages/banner) | [](https://www.npmjs.com/package/@leafygreen-ui/banner) |  | [Live Example](http://mongodb.design/component/banner/live-example) |
| [@leafygreen-ui/button](./packages/button) | [](https://www.npmjs.com/package/@leafygreen-ui/button) |  | [Live Example](http://mongodb.design/component/button/live-example) |
| [@leafygreen-ui/callout](./packages/callout) | [](https://www.npmjs.com/package/@leafygreen-ui/callout) |  | [Live Example](http://mongodb.design/component/callout/live-example) |
| [@leafygreen-ui/card](./packages/card) | [](https://www.npmjs.com/package/@leafygreen-ui/card) |  | [Live Example](http://mongodb.design/component/card/live-example) |
| [@leafygreen-ui/checkbox](./packages/checkbox) | [](https://www.npmjs.com/package/@leafygreen-ui/checkbox) |  | [Live Example](http://mongodb.design/component/checkbox/live-example) |
| [@leafygreen-ui/chip](./packages/chip) | [](https://www.npmjs.com/package/@leafygreen-ui/chip) |  | [Live Example](http://mongodb.design/component/chip/live-example) |
| [@leafygreen-ui/code](./packages/code) | [](https://www.npmjs.com/package/@leafygreen-ui/code) |  | [Live Example](http://mongodb.design/component/code/live-example) |
| [@leafygreen-ui/code-editor](./packages/code-editor) | [](https://www.npmjs.com/package/@leafygreen-ui/code-editor) |  | [Live Example](http://mongodb.design/component/code-editor/live-example) |
| [@leafygreen-ui/combobox](./packages/combobox) | [](https://www.npmjs.com/package/@leafygreen-ui/combobox) |  | [Live Example](http://mongodb.design/component/combobox/live-example) |
| [@leafygreen-ui/confirmation-modal](./packages/confirmation-modal) | [](https://www.npmjs.com/package/@leafygreen-ui/confirmation-modal) |  | [Live Example](http://mongodb.design/component/confirmation-modal/live-example) |
| [@leafygreen-ui/context-drawer](./packages/context-drawer) | [](https://www.npmjs.com/package/@leafygreen-ui/context-drawer) |  | [Live Example](http://mongodb.design/component/context-drawer/live-example) |
| [@leafygreen-ui/copyable](./packages/copyable) | [](https://www.npmjs.com/package/@leafygreen-ui/copyable) |  | [Live Example](http://mongodb.design/component/copyable/live-example) |
| [@leafygreen-ui/date-picker](./packages/date-picker) | [](https://www.npmjs.com/package/@leafygreen-ui/date-picker) |  | [Live Example](http://mongodb.design/component/date-picker/live-example) |
| [@leafygreen-ui/date-utils](./packages/date-utils) | [](https://www.npmjs.com/package/@leafygreen-ui/date-utils) |  | [Live Example](http://mongodb.design/component/date-utils/live-example) |
| [@leafygreen-ui/descendants](./packages/descendants) | [](https://www.npmjs.com/package/@leafygreen-ui/descendants) |  | [Live Example](http://mongodb.design/component/descendants/live-example) |
| [@leafygreen-ui/drawer](./packages/drawer) | [](https://www.npmjs.com/package/@leafygreen-ui/drawer) |  | [Live Example](http://mongodb.design/component/drawer/live-example) |
| [@leafygreen-ui/emotion](./packages/emotion) | [](https://www.npmjs.com/package/@leafygreen-ui/emotion) |  | [Live Example](http://mongodb.design/component/emotion/live-example) |
| [@leafygreen-ui/empty-state](./packages/empty-state) | [](https://www.npmjs.com/package/@leafygreen-ui/empty-state) |  | [Live Example](http://mongodb.design/component/empty-state/live-example) |
| [@leafygreen-ui/expandable-card](./packages/expandable-card) | [](https://www.npmjs.com/package/@leafygreen-ui/expandable-card) |  | [Live Example](http://mongodb.design/component/expandable-card/live-example) |
| [@leafygreen-ui/feature-walls](./packages/feature-walls) | [](https://www.npmjs.com/package/@leafygreen-ui/feature-walls) |  | [Live Example](http://mongodb.design/component/feature-walls/live-example) |
| [@leafygreen-ui/form-field](./packages/form-field) | [](https://www.npmjs.com/package/@leafygreen-ui/form-field) |  | [Live Example](http://mongodb.design/component/form-field/live-example) |
| [@leafygreen-ui/form-footer](./packages/form-footer) | [](https://www.npmjs.com/package/@leafygreen-ui/form-footer) |  | [Live Example](http://mongodb.design/component/form-footer/live-example) |
| [@leafygreen-ui/gallery-indicator](./packages/gallery-indicator) | [](https://www.npmjs.com/package/@leafygreen-ui/gallery-indicator) |  | [Live Example](http://mongodb.design/component/gallery-indicator/live-example) |
| [@leafygreen-ui/guide-cue](./packages/guide-cue) | [](https://www.npmjs.com/package/@leafygreen-ui/guide-cue) |  | [Live Example](http://mongodb.design/component/guide-cue/live-example) |
| [@leafygreen-ui/hooks](./packages/hooks) | [](https://www.npmjs.com/package/@leafygreen-ui/hooks) |  | [Live Example](http://mongodb.design/component/hooks/live-example) |
| [@leafygreen-ui/icon](./packages/icon) | [](https://www.npmjs.com/package/@leafygreen-ui/icon) |  | [Live Example](http://mongodb.design/component/icon/live-example) |
| [@leafygreen-ui/icon-button](./packages/icon-button) | [](https://www.npmjs.com/package/@leafygreen-ui/icon-button) |  | [Live Example](http://mongodb.design/component/icon-button/live-example) |
| [@leafygreen-ui/info-sprinkle](./packages/info-sprinkle) | [](https://www.npmjs.com/package/@leafygreen-ui/info-sprinkle) |  | [Live Example](http://mongodb.design/component/info-sprinkle/live-example) |
| [@leafygreen-ui/inline-definition](./packages/inline-definition) | [](https://www.npmjs.com/package/@leafygreen-ui/inline-definition) |  | [Live Example](http://mongodb.design/component/inline-definition/live-example) |
| [@leafygreen-ui/input-option](./packages/input-option) | [](https://www.npmjs.com/package/@leafygreen-ui/input-option) |  | [Live Example](http://mongodb.design/component/input-option/live-example) |
| [@leafygreen-ui/leafygreen-provider](./packages/leafygreen-provider) | [](https://www.npmjs.com/package/@leafygreen-ui/leafygreen-provider) |  | [Live Example](http://mongodb.design/component/leafygreen-provider/live-example) |
| [@leafygreen-ui/lib](./packages/lib) | [](https://www.npmjs.com/package/@leafygreen-ui/lib) |  | [Live Example](http://mongodb.design/component/lib/live-example) |
| [@leafygreen-ui/loading-indicator](./packages/loading-indicator) | [](https://www.npmjs.com/package/@leafygreen-ui/loading-indicator) |  | [Live Example](http://mongodb.design/component/loading-indicator/live-example) |
| [@leafygreen-ui/logo](./packages/logo) | [](https://www.npmjs.com/package/@leafygreen-ui/logo) |  | [Live Example](http://mongodb.design/component/logo/live-example) |
| [@leafygreen-ui/marketing-modal](./packages/marketing-modal) | [](https://www.npmjs.com/package/@leafygreen-ui/marketing-modal) |  | [Live Example](http://mongodb.design/component/marketing-modal/live-example) |
| [@leafygreen-ui/menu](./packages/menu) | [](https://www.npmjs.com/package/@leafygreen-ui/menu) |  | [Live Example](http://mongodb.design/component/menu/live-example) |
| [@leafygreen-ui/modal](./packages/modal) | [](https://www.npmjs.com/package/@leafygreen-ui/modal) |  | [Live Example](http://mongodb.design/component/modal/live-example) |
| [@leafygreen-ui/number-input](./packages/number-input) | [](https://www.npmjs.com/package/@leafygreen-ui/number-input) |  | [Live Example](http://mongodb.design/component/number-input/live-example) |
| [@leafygreen-ui/ordered-list](./packages/ordered-list) | [](https://www.npmjs.com/package/@leafygreen-ui/ordered-list) |  | [Live Example](http://mongodb.design/component/ordered-list/live-example) |
| [@leafygreen-ui/pagination](./packages/pagination) | [](https://www.npmjs.com/package/@leafygreen-ui/pagination) |  | [Live Example](http://mongodb.design/component/pagination/live-example) |
| [@leafygreen-ui/palette](./packages/palette) | [](https://www.npmjs.com/package/@leafygreen-ui/palette) |  | [Live Example](http://mongodb.design/component/palette/live-example) |
| [@leafygreen-ui/password-input](./packages/password-input) | [](https://www.npmjs.com/package/@leafygreen-ui/password-input) |  | [Live Example](http://mongodb.design/component/password-input/live-example) |
| [@leafygreen-ui/preview-card](./packages/preview-card) | [](https://www.npmjs.com/package/@leafygreen-ui/preview-card) |  | [Live Example](http://mongodb.design/component/preview-card/live-example) |
| [@leafygreen-ui/pipeline](./packages/pipeline) | [](https://www.npmjs.com/package/@leafygreen-ui/pipeline) |  | [Live Example](http://mongodb.design/component/pipeline/live-example) |
| [@leafygreen-ui/polymorphic](./packages/polymorphic) | [](https://www.npmjs.com/package/@leafygreen-ui/polymorphic) |  | [Live Example](http://mongodb.design/component/polymorphic/live-example) |
| [@leafygreen-ui/popover](./packages/popover) | [](https://www.npmjs.com/package/@leafygreen-ui/popover) |  | [Live Example](http://mongodb.design/component/popover/live-example) |
| [@leafygreen-ui/portal](./packages/portal) | [](https://www.npmjs.com/package/@leafygreen-ui/portal) |  | [Live Example](http://mongodb.design/component/portal/live-example) |
| [@leafygreen-ui/progress-bar](./packages/progress-bar) | [](https://www.npmjs.com/package/@leafygreen-ui/progress-bar) |  | [Live Example](http://mongodb.design/component/progress-bar/live-example) |
| [@leafygreen-ui/radio-box-group](./packages/radio-box-group) | [](https://www.npmjs.com/package/@leafygreen-ui/radio-box-group) |  | [Live Example](http://mongodb.design/component/radio-box-group/live-example) |
| [@leafygreen-ui/radio-group](./packages/radio-group) | [](https://www.npmjs.com/package/@leafygreen-ui/radio-group) |  | [Live Example](http://mongodb.design/component/radio-group/live-example) |
| [@leafygreen-ui/ripple](./packages/ripple) | [](https://www.npmjs.com/package/@leafygreen-ui/ripple) |  | [Live Example](http://mongodb.design/component/ripple/live-example) |
| [@leafygreen-ui/search-input](./packages/search-input) | [](https://www.npmjs.com/package/@leafygreen-ui/search-input) |  | [Live Example](http://mongodb.design/component/search-input/live-example) |
| [@leafygreen-ui/section-nav](./packages/section-nav) | [](https://www.npmjs.com/package/@leafygreen-ui/section-nav) |  | [Live Example](http://mongodb.design/component/section-nav/live-example) |
| [@leafygreen-ui/segmented-control](./packages/segmented-control) | [](https://www.npmjs.com/package/@leafygreen-ui/segmented-control) |  | [Live Example](http://mongodb.design/component/segmented-control/live-example) |
| [@leafygreen-ui/select](./packages/select) | [](https://www.npmjs.com/package/@leafygreen-ui/select) |  | [Live Example](http://mongodb.design/component/select/live-example) |
| [@leafygreen-ui/side-nav](./packages/side-nav) | [](https://www.npmjs.com/package/@leafygreen-ui/side-nav) |  | [Live Example](http://mongodb.design/component/side-nav/live-example) |
| [@leafygreen-ui/skeleton-loader](./packages/skeleton-loader) | [](https://www.npmjs.com/package/@leafygreen-ui/skeleton-loader) |  | [Live Example](http://mongodb.design/component/skeleton-loader/live-example) |
| [@leafygreen-ui/split-button](./packages/split-button) | [](https://www.npmjs.com/package/@leafygreen-ui/split-button) |  | [Live Example](http://mongodb.design/component/split-button/live-example) |
| [@leafygreen-ui/stepper](./packages/stepper) | [](https://www.npmjs.com/package/@leafygreen-ui/stepper) |  | [Live Example](http://mongodb.design/component/stepper/live-example) |
| [@leafygreen-ui/table](./packages/table) | [](https://www.npmjs.com/package/@leafygreen-ui/table) |  | [Live Example](http://mongodb.design/component/table/live-example) |
| [@leafygreen-ui/tabs](./packages/tabs) | [](https://www.npmjs.com/package/@leafygreen-ui/tabs) |  | [Live Example](http://mongodb.design/component/tabs/live-example) |
| [@leafygreen-ui/testing-lib](./packages/testing-lib) | [](https://www.npmjs.com/package/@leafygreen-ui/testing-lib) |  | [Live Example](http://mongodb.design/component/testing-lib/live-example) |
| [@leafygreen-ui/text-area](./packages/text-area) | [](https://www.npmjs.com/package/@leafygreen-ui/text-area) |  | [Live Example](http://mongodb.design/component/text-area/live-example) |
| [@leafygreen-ui/text-input](./packages/text-input) | [](https://www.npmjs.com/package/@leafygreen-ui/text-input) |  | [Live Example](http://mongodb.design/component/text-input/live-example) |
| [@leafygreen-ui/toast](./packages/toast) | [](https://www.npmjs.com/package/@leafygreen-ui/toast) |  | [Live Example](http://mongodb.design/component/toast/live-example) |
| [@leafygreen-ui/toggle](./packages/toggle) | [](https://www.npmjs.com/package/@leafygreen-ui/toggle) |  | [Live Example](http://mongodb.design/component/toggle/live-example) |
| [@leafygreen-ui/tokens](./packages/tokens) | [](https://www.npmjs.com/package/@leafygreen-ui/tokens) |  | [Live Example](http://mongodb.design/component/tokens/live-example) |
| [@leafygreen-ui/toolbar](./packages/toolbar) | [](https://www.npmjs.com/package/@leafygreen-ui/toolbar) |  | [Live Example](http://mongodb.design/component/toolbar/live-example) |
| [@leafygreen-ui/tooltip](./packages/tooltip) | [](https://www.npmjs.com/package/@leafygreen-ui/tooltip) |  | [Live Example](http://mongodb.design/component/tooltip/live-example) |
| [@leafygreen-ui/typography](./packages/typography) | [](https://www.npmjs.com/package/@leafygreen-ui/typography) |  | [Live Example](http://mongodb.design/component/typography/live-example) |
| [@leafygreen-ui/vertical-stepper](./packages/vertical-stepper) | [](https://www.npmjs.com/package/@leafygreen-ui/vertical-stepper) |  | [Live Example](http://mongodb.design/component/vertical-stepper/live-example) |
| [@lg-charts/chart-card](./charts/chart-card) | [](https://www.npmjs.com/package/@lg-charts/chart-card) |  | [Live Example](http://mongodb.design/component/chart-card/live-example) |
| [@lg-charts/colors](./charts/colors) | [](https://www.npmjs.com/package/@lg-charts/colors) |  | [Live Example](http://mongodb.design/component/colors/live-example) |
| [@lg-charts/core](./charts/core) | [](https://www.npmjs.com/package/@lg-charts/core) |  | [Live Example](http://mongodb.design/component/core/live-example) |
| [@lg-charts/drag-provider](./charts/drag-provider) | [](https://www.npmjs.com/package/@lg-charts/drag-provider) |  | [Live Example](http://mongodb.design/component/drag-provider/live-example) |
| [@lg-charts/legend](./charts/legend) | [](https://www.npmjs.com/package/@lg-charts/legend) |  | [Live Example](http://mongodb.design/component/legend/live-example) |
| [@lg-charts/series-provider](./charts/series-provider) | [](https://www.npmjs.com/package/@lg-charts/series-provider) |  | [Live Example](http://mongodb.design/component/series-provider/live-example) |
| [@lg-chat/chat-button](./chat/chat-button) | [](https://www.npmjs.com/package/@lg-chat/chat-button) |  | [Live Example](http://mongodb.design/component/chat-button/live-example) |
| [@lg-chat/chat-layout](./chat/chat-layout) | [](https://www.npmjs.com/package/@lg-chat/chat-layout) |  | [Live Example](http://mongodb.design/component/chat-layout/live-example) |
| [@lg-chat/chat-window](./chat/chat-window) | [](https://www.npmjs.com/package/@lg-chat/chat-window) |  | [Live Example](http://mongodb.design/component/chat-window/live-example) |
| [@lg-chat/input-bar](./chat/input-bar) | [](https://www.npmjs.com/package/@lg-chat/input-bar) |  | [Live Example](http://mongodb.design/component/input-bar/live-example) |
| [@lg-chat/leafygreen-chat-provider](./chat/leafygreen-chat-provider) | [](https://www.npmjs.com/package/@lg-chat/leafygreen-chat-provider) |  | [Live Example](http://mongodb.design/component/leafygreen-chat-provider/live-example) |
| [@lg-chat/lg-markdown](./chat/lg-markdown) | [](https://www.npmjs.com/package/@lg-chat/lg-markdown) |  | [Live Example](http://mongodb.design/component/lg-markdown/live-example) |
| [@lg-chat/message](./chat/message) | [](https://www.npmjs.com/package/@lg-chat/message) |  | [Live Example](http://mongodb.design/component/message/live-example) |
| [@lg-chat/message-feed](./chat/message-feed) | [](https://www.npmjs.com/package/@lg-chat/message-feed) |  | [Live Example](http://mongodb.design/component/message-feed/live-example) |
| [@lg-chat/message-feedback](./chat/message-feedback) | [](https://www.npmjs.com/package/@lg-chat/message-feedback) |  | [Live Example](http://mongodb.design/component/message-feedback/live-example) |
| [@lg-chat/message-prompts](./chat/message-prompts) | [](https://www.npmjs.com/package/@lg-chat/message-prompts) |  | [Live Example](http://mongodb.design/component/message-prompts/live-example) |
| [@lg-chat/message-rating](./chat/message-rating) | [](https://www.npmjs.com/package/@lg-chat/message-rating) |  | [Live Example](http://mongodb.design/component/message-rating/live-example) |
| [@lg-chat/rich-links](./chat/rich-links) | [](https://www.npmjs.com/package/@lg-chat/rich-links) |  | [Live Example](http://mongodb.design/component/rich-links/live-example) |
| [@lg-chat/suggestions](./chat/suggestions) | [](https://www.npmjs.com/package/@lg-chat/suggestions) |  | [Live Example](http://mongodb.design/component/suggestions/live-example) |
| [@lg-chat/title-bar](./chat/title-bar) | [](https://www.npmjs.com/package/@lg-chat/title-bar) |  | [Live Example](http://mongodb.design/component/title-bar/live-example) |
| [@lg-tools/build](./tools/build) | [](https://www.npmjs.com/package/@lg-tools/build) |  | |
| [@lg-tools/cli](./tools/cli) | [](https://www.npmjs.com/package/@lg-tools/cli) |  | |
| [@lg-tools/codemods](./tools/codemods) | [](https://www.npmjs.com/package/@lg-tools/codemods) |  | |
| [@lg-tools/create](./tools/create) | [](https://www.npmjs.com/package/@lg-tools/create) |  | |
| [@lg-tools/install](./tools/install) | [](https://www.npmjs.com/package/@lg-tools/install) |  | |
| [@lg-tools/link](./tools/link) | [](https://www.npmjs.com/package/@lg-tools/link) |  | |
| [@lg-tools/lint](./tools/lint) | [](https://www.npmjs.com/package/@lg-tools/lint) |  | |
| [@lg-tools/meta](./tools/meta) | [](https://www.npmjs.com/package/@lg-tools/meta) |  | |
| [@lg-tools/slackbot](./tools/slackbot) | [](https://www.npmjs.com/package/@lg-tools/slackbot) |  | |
| [@lg-tools/storybook-addon](./tools/storybook-addon) | [](https://www.npmjs.com/package/@lg-tools/storybook-addon) |  | |
| [@lg-tools/storybook-decorators](./tools/storybook-decorators) | [](https://www.npmjs.com/package/@lg-tools/storybook-decorators) |  | |
| [@lg-tools/storybook-utils](./tools/storybook-utils) | [](https://www.npmjs.com/package/@lg-tools/storybook-utils) |  | |
| [@lg-tools/test](./tools/test) | [](https://www.npmjs.com/package/@lg-tools/test) |  | |
| [@lg-tools/test-harnesses](./tools/test-harnesses) | [](https://www.npmjs.com/package/@lg-tools/test-harnesses) |  | |
| [@lg-tools/update](./tools/update) | [](https://www.npmjs.com/package/@lg-tools/update) |  | |
| [@lg-tools/validate](./tools/validate) | [](https://www.npmjs.com/package/@lg-tools/validate) |  | |
| [@lg-mcp/embeddable-uis](./mcp/embeddable-uis) | [](https://www.npmjs.com/package/@lg-mcp/embeddable-uis) |  | |
| [@lg-mcp/hooks](./mcp/hooks) | [](https://www.npmjs.com/package/@lg-mcp/hooks) |  | |
| [@lg-mcp/ui-resource-renderer](./mcp/ui-resource-renderer) | [](https://www.npmjs.com/package/@lg-mcp/ui-resource-renderer) |  | |
## Contributing
We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details on:
- Setting up your development environment
- Creating new components
- Testing and code style
- Submitting pull requests
For advanced topics like testing in external applications and publishing, see our [Developer Guide](./DEVELOPER.md).
## License
The source files in this repository are made available under the terms of the Apache License, version 2.0.