# @leafygreen-ui/polymorphic

> LeafyGreen UI Kit Polymorphic

Latest version **3.1.0** (published 2025-09-25) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @leafygreen-ui/polymorphic
pnpm add @leafygreen-ui/polymorphic
yarn add @leafygreen-ui/polymorphic
bun add @leafygreen-ui/polymorphic
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2025-09-25 |
| First published | 2022-12-02 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 298 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 271 |
| Maintainers | hswolff, thesonofthomp, brookescarlett, shaneeza, stephl3, _tsck |

## Links

- npm: https://www.npmjs.com/package/@leafygreen-ui/polymorphic
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/polymorphic
- Issues: https://jira.mongodb.org/projects/LG/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/polymorphic

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.4.0

## Recent versions

- 3.1.0 (latest) — 2025-09-25
- 3.1.1-wizard-beta.0 (wizard-beta) — 2025-10-10
- 1.3.3 (beta) — 2023-07-26
- 3.0.4 — 2025-09-10
- 3.0.3 — 2025-07-03
- 3.0.2 — 2025-06-30
- 3.0.1 — 2025-06-16
- 3.0.0 — 2025-05-29
- 2.0.9 — 2025-04-08
- 2.0.8 — 2025-04-02
- 2.0.7 — 2025-03-05
- 2.0.6 — 2025-03-03
- 2.0.5 — 2025-01-21
- 2.0.4 — 2025-01-18
- 2.0.3 — 2025-01-09
- … 26 more at https://npm.io/package/@leafygreen-ui/polymorphic/versions

## README

<img src="./.storybook/static/leafygreen-ui-banner.png" width="100%"/>

<h1 align="center">LeafyGreen UI</h1>

<p align="center">A library of React components, CSS patterns, and CLI tools for MongoDB's LeafyGreen Design System.</p>

<p align="center">
   <a align="center" href="https://mongodb.design">
      <img src="https://img.shields.io/badge/mongodb.design-112733?style=for-the-badge&logo=mongodb&logoColor=00ED64.svg" alt="mongodb.design">
   </a>
</p>

<p align="center">
   <a href="https://storybook.mongodb.design">
      <img src="https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg" alt="Storybook"/>
   </a>
</p>

<p align="center">
   <img alt="Release" src="https://github.com/mongodb/leafygreen-ui/actions/workflows/release.yml/badge.svg"/>
   <img alt="License" src="https://img.shields.io/github/license/mongodb/leafygreen-ui">
</p>

## 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)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/a11y)](https://www.npmjs.com/package/@leafygreen-ui/a11y)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/a11y?color=white)                | [Live Example](http://mongodb.design/component/a11y/live-example)                     |
| [@leafygreen-ui/avatar](./packages/avatar)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/avatar)](https://www.npmjs.com/package/@leafygreen-ui/avatar)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/avatar?color=white)              | [Live Example](http://mongodb.design/component/avatar/live-example)                   |
| [@leafygreen-ui/badge](./packages/badge)                             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/badge)](https://www.npmjs.com/package/@leafygreen-ui/badge)                             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/badge?color=white)               | [Live Example](http://mongodb.design/component/badge/live-example)                    |
| [@leafygreen-ui/banner](./packages/banner)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/banner)](https://www.npmjs.com/package/@leafygreen-ui/banner)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/banner?color=white)              | [Live Example](http://mongodb.design/component/banner/live-example)                   |
| [@leafygreen-ui/button](./packages/button)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/button)](https://www.npmjs.com/package/@leafygreen-ui/button)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/button?color=white)              | [Live Example](http://mongodb.design/component/button/live-example)                   |
| [@leafygreen-ui/callout](./packages/callout)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/callout)](https://www.npmjs.com/package/@leafygreen-ui/callout)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/callout?color=white)             | [Live Example](http://mongodb.design/component/callout/live-example)                  |
| [@leafygreen-ui/card](./packages/card)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/card)](https://www.npmjs.com/package/@leafygreen-ui/card)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/card?color=white)                | [Live Example](http://mongodb.design/component/card/live-example)                     |
| [@leafygreen-ui/checkbox](./packages/checkbox)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/checkbox)](https://www.npmjs.com/package/@leafygreen-ui/checkbox)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/checkbox?color=white)            | [Live Example](http://mongodb.design/component/checkbox/live-example)                 |
| [@leafygreen-ui/chip](./packages/chip)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/chip)](https://www.npmjs.com/package/@leafygreen-ui/chip)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/chip?color=white)                | [Live Example](http://mongodb.design/component/chip/live-example)                     |
| [@leafygreen-ui/code](./packages/code)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/code)](https://www.npmjs.com/package/@leafygreen-ui/code)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/code?color=white)                | [Live Example](http://mongodb.design/component/code/live-example)                     |
| [@leafygreen-ui/code-editor](./packages/code-editor)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/code-editor)](https://www.npmjs.com/package/@leafygreen-ui/code-editor)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/code-editor?color=white)         | [Live Example](http://mongodb.design/component/code-editor/live-example)              |
| [@leafygreen-ui/combobox](./packages/combobox)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/combobox)](https://www.npmjs.com/package/@leafygreen-ui/combobox)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/combobox?color=white)            | [Live Example](http://mongodb.design/component/combobox/live-example)                 |
| [@leafygreen-ui/confirmation-modal](./packages/confirmation-modal)   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/confirmation-modal)](https://www.npmjs.com/package/@leafygreen-ui/confirmation-modal)   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/confirmation-modal?color=white)  | [Live Example](http://mongodb.design/component/confirmation-modal/live-example)       |
| [@leafygreen-ui/context-drawer](./packages/context-drawer)           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/context-drawer)](https://www.npmjs.com/package/@leafygreen-ui/context-drawer)           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/context-drawer?color=white)      | [Live Example](http://mongodb.design/component/context-drawer/live-example)           |
| [@leafygreen-ui/copyable](./packages/copyable)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/copyable)](https://www.npmjs.com/package/@leafygreen-ui/copyable)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/copyable?color=white)            | [Live Example](http://mongodb.design/component/copyable/live-example)                 |
| [@leafygreen-ui/date-picker](./packages/date-picker)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/date-picker)](https://www.npmjs.com/package/@leafygreen-ui/date-picker)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/date-picker?color=white)         | [Live Example](http://mongodb.design/component/date-picker/live-example)              |
| [@leafygreen-ui/date-utils](./packages/date-utils)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/date-utils)](https://www.npmjs.com/package/@leafygreen-ui/date-utils)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/date-utils?color=white)          | [Live Example](http://mongodb.design/component/date-utils/live-example)               |
| [@leafygreen-ui/descendants](./packages/descendants)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/descendants)](https://www.npmjs.com/package/@leafygreen-ui/descendants)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/descendants?color=white)         | [Live Example](http://mongodb.design/component/descendants/live-example)              |
| [@leafygreen-ui/drawer](./packages/drawer)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/drawer)](https://www.npmjs.com/package/@leafygreen-ui/drawer)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/drawer?color=white)              | [Live Example](http://mongodb.design/component/drawer/live-example)                   |
| [@leafygreen-ui/emotion](./packages/emotion)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/emotion)](https://www.npmjs.com/package/@leafygreen-ui/emotion)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/emotion?color=white)             | [Live Example](http://mongodb.design/component/emotion/live-example)                  |
| [@leafygreen-ui/empty-state](./packages/empty-state)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/empty-state)](https://www.npmjs.com/package/@leafygreen-ui/empty-state)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/empty-state?color=white)         | [Live Example](http://mongodb.design/component/empty-state/live-example)              |
| [@leafygreen-ui/expandable-card](./packages/expandable-card)         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/expandable-card)](https://www.npmjs.com/package/@leafygreen-ui/expandable-card)         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/expandable-card?color=white)     | [Live Example](http://mongodb.design/component/expandable-card/live-example)          |
| [@leafygreen-ui/feature-walls](./packages/feature-walls)             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/feature-walls)](https://www.npmjs.com/package/@leafygreen-ui/feature-walls)             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/feature-walls?color=white)       | [Live Example](http://mongodb.design/component/feature-walls/live-example)            |
| [@leafygreen-ui/form-field](./packages/form-field)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/form-field)](https://www.npmjs.com/package/@leafygreen-ui/form-field)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/form-field?color=white)          | [Live Example](http://mongodb.design/component/form-field/live-example)               |
| [@leafygreen-ui/form-footer](./packages/form-footer)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/form-footer)](https://www.npmjs.com/package/@leafygreen-ui/form-footer)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/form-footer?color=white)         | [Live Example](http://mongodb.design/component/form-footer/live-example)              |
| [@leafygreen-ui/gallery-indicator](./packages/gallery-indicator)     | [![version](https://img.shields.io/npm/v/@leafygreen-ui/gallery-indicator)](https://www.npmjs.com/package/@leafygreen-ui/gallery-indicator)     | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/gallery-indicator?color=white)   | [Live Example](http://mongodb.design/component/gallery-indicator/live-example)        |
| [@leafygreen-ui/guide-cue](./packages/guide-cue)                     | [![version](https://img.shields.io/npm/v/@leafygreen-ui/guide-cue)](https://www.npmjs.com/package/@leafygreen-ui/guide-cue)                     | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/guide-cue?color=white)           | [Live Example](http://mongodb.design/component/guide-cue/live-example)                |
| [@leafygreen-ui/hooks](./packages/hooks)                             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/hooks)](https://www.npmjs.com/package/@leafygreen-ui/hooks)                             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/hooks?color=white)               | [Live Example](http://mongodb.design/component/hooks/live-example)                    |
| [@leafygreen-ui/icon](./packages/icon)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/icon)](https://www.npmjs.com/package/@leafygreen-ui/icon)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/icon?color=white)                | [Live Example](http://mongodb.design/component/icon/live-example)                     |
| [@leafygreen-ui/icon-button](./packages/icon-button)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/icon-button)](https://www.npmjs.com/package/@leafygreen-ui/icon-button)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/icon-button?color=white)         | [Live Example](http://mongodb.design/component/icon-button/live-example)              |
| [@leafygreen-ui/info-sprinkle](./packages/info-sprinkle)             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/info-sprinkle)](https://www.npmjs.com/package/@leafygreen-ui/info-sprinkle)             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/info-sprinkle?color=white)       | [Live Example](http://mongodb.design/component/info-sprinkle/live-example)            |
| [@leafygreen-ui/inline-definition](./packages/inline-definition)     | [![version](https://img.shields.io/npm/v/@leafygreen-ui/inline-definition)](https://www.npmjs.com/package/@leafygreen-ui/inline-definition)     | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/inline-definition?color=white)   | [Live Example](http://mongodb.design/component/inline-definition/live-example)        |
| [@leafygreen-ui/input-option](./packages/input-option)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/input-option)](https://www.npmjs.com/package/@leafygreen-ui/input-option)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/input-option?color=white)        | [Live Example](http://mongodb.design/component/input-option/live-example)             |
| [@leafygreen-ui/leafygreen-provider](./packages/leafygreen-provider) | [![version](https://img.shields.io/npm/v/@leafygreen-ui/leafygreen-provider)](https://www.npmjs.com/package/@leafygreen-ui/leafygreen-provider) | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/leafygreen-provider?color=white) | [Live Example](http://mongodb.design/component/leafygreen-provider/live-example)      |
| [@leafygreen-ui/lib](./packages/lib)                                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/lib)](https://www.npmjs.com/package/@leafygreen-ui/lib)                                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/lib?color=white)                 | [Live Example](http://mongodb.design/component/lib/live-example)                      |
| [@leafygreen-ui/loading-indicator](./packages/loading-indicator)     | [![version](https://img.shields.io/npm/v/@leafygreen-ui/loading-indicator)](https://www.npmjs.com/package/@leafygreen-ui/loading-indicator)     | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/loading-indicator?color=white)   | [Live Example](http://mongodb.design/component/loading-indicator/live-example)        |
| [@leafygreen-ui/logo](./packages/logo)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/logo)](https://www.npmjs.com/package/@leafygreen-ui/logo)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/logo?color=white)                | [Live Example](http://mongodb.design/component/logo/live-example)                     |
| [@leafygreen-ui/marketing-modal](./packages/marketing-modal)         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/marketing-modal)](https://www.npmjs.com/package/@leafygreen-ui/marketing-modal)         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/marketing-modal?color=white)     | [Live Example](http://mongodb.design/component/marketing-modal/live-example)          |
| [@leafygreen-ui/menu](./packages/menu)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/menu)](https://www.npmjs.com/package/@leafygreen-ui/menu)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/menu?color=white)                | [Live Example](http://mongodb.design/component/menu/live-example)                     |
| [@leafygreen-ui/modal](./packages/modal)                             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/modal)](https://www.npmjs.com/package/@leafygreen-ui/modal)                             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/modal?color=white)               | [Live Example](http://mongodb.design/component/modal/live-example)                    |
| [@leafygreen-ui/number-input](./packages/number-input)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/number-input)](https://www.npmjs.com/package/@leafygreen-ui/number-input)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/number-input?color=white)        | [Live Example](http://mongodb.design/component/number-input/live-example)             |
| [@leafygreen-ui/ordered-list](./packages/ordered-list)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/ordered-list)](https://www.npmjs.com/package/@leafygreen-ui/ordered-list)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/ordered-list?color=white)        | [Live Example](http://mongodb.design/component/ordered-list/live-example)             |
| [@leafygreen-ui/pagination](./packages/pagination)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/pagination)](https://www.npmjs.com/package/@leafygreen-ui/pagination)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/pagination?color=white)          | [Live Example](http://mongodb.design/component/pagination/live-example)               |
| [@leafygreen-ui/palette](./packages/palette)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/palette)](https://www.npmjs.com/package/@leafygreen-ui/palette)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/palette?color=white)             | [Live Example](http://mongodb.design/component/palette/live-example)                  |
| [@leafygreen-ui/password-input](./packages/password-input)           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/password-input)](https://www.npmjs.com/package/@leafygreen-ui/password-input)           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/password-input?color=white)      | [Live Example](http://mongodb.design/component/password-input/live-example)           |
| [@leafygreen-ui/preview-card](./packages/preview-card)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/preview-card)](https://www.npmjs.com/package/@leafygreen-ui/preview-card)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/preview-card?color=white)        | [Live Example](http://mongodb.design/component/preview-card/live-example)             |
| [@leafygreen-ui/pipeline](./packages/pipeline)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/pipeline)](https://www.npmjs.com/package/@leafygreen-ui/pipeline)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/pipeline?color=white)            | [Live Example](http://mongodb.design/component/pipeline/live-example)                 |
| [@leafygreen-ui/polymorphic](./packages/polymorphic)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/polymorphic)](https://www.npmjs.com/package/@leafygreen-ui/polymorphic)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/polymorphic?color=white)         | [Live Example](http://mongodb.design/component/polymorphic/live-example)              |
| [@leafygreen-ui/popover](./packages/popover)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/popover)](https://www.npmjs.com/package/@leafygreen-ui/popover)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/popover?color=white)             | [Live Example](http://mongodb.design/component/popover/live-example)                  |
| [@leafygreen-ui/portal](./packages/portal)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/portal)](https://www.npmjs.com/package/@leafygreen-ui/portal)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/portal?color=white)              | [Live Example](http://mongodb.design/component/portal/live-example)                   |
| [@leafygreen-ui/progress-bar](./packages/progress-bar)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/progress-bar)](https://www.npmjs.com/package/@leafygreen-ui/progress-bar)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/progress-bar?color=white)        | [Live Example](http://mongodb.design/component/progress-bar/live-example)             |
| [@leafygreen-ui/radio-box-group](./packages/radio-box-group)         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/radio-box-group)](https://www.npmjs.com/package/@leafygreen-ui/radio-box-group)         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/radio-box-group?color=white)     | [Live Example](http://mongodb.design/component/radio-box-group/live-example)          |
| [@leafygreen-ui/radio-group](./packages/radio-group)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/radio-group)](https://www.npmjs.com/package/@leafygreen-ui/radio-group)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/radio-group?color=white)         | [Live Example](http://mongodb.design/component/radio-group/live-example)              |
| [@leafygreen-ui/ripple](./packages/ripple)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/ripple)](https://www.npmjs.com/package/@leafygreen-ui/ripple)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/ripple?color=white)              | [Live Example](http://mongodb.design/component/ripple/live-example)                   |
| [@leafygreen-ui/search-input](./packages/search-input)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/search-input)](https://www.npmjs.com/package/@leafygreen-ui/search-input)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/search-input?color=white)        | [Live Example](http://mongodb.design/component/search-input/live-example)             |
| [@leafygreen-ui/section-nav](./packages/section-nav)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/section-nav)](https://www.npmjs.com/package/@leafygreen-ui/section-nav)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/section-nav?color=white)         | [Live Example](http://mongodb.design/component/section-nav/live-example)              |
| [@leafygreen-ui/segmented-control](./packages/segmented-control)     | [![version](https://img.shields.io/npm/v/@leafygreen-ui/segmented-control)](https://www.npmjs.com/package/@leafygreen-ui/segmented-control)     | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/segmented-control?color=white)   | [Live Example](http://mongodb.design/component/segmented-control/live-example)        |
| [@leafygreen-ui/select](./packages/select)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/select)](https://www.npmjs.com/package/@leafygreen-ui/select)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/select?color=white)              | [Live Example](http://mongodb.design/component/select/live-example)                   |
| [@leafygreen-ui/side-nav](./packages/side-nav)                       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/side-nav)](https://www.npmjs.com/package/@leafygreen-ui/side-nav)                       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/side-nav?color=white)            | [Live Example](http://mongodb.design/component/side-nav/live-example)                 |
| [@leafygreen-ui/skeleton-loader](./packages/skeleton-loader)         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/skeleton-loader)](https://www.npmjs.com/package/@leafygreen-ui/skeleton-loader)         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/skeleton-loader?color=white)     | [Live Example](http://mongodb.design/component/skeleton-loader/live-example)          |
| [@leafygreen-ui/split-button](./packages/split-button)               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/split-button)](https://www.npmjs.com/package/@leafygreen-ui/split-button)               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/split-button?color=white)        | [Live Example](http://mongodb.design/component/split-button/live-example)             |
| [@leafygreen-ui/stepper](./packages/stepper)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/stepper)](https://www.npmjs.com/package/@leafygreen-ui/stepper)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/stepper?color=white)             | [Live Example](http://mongodb.design/component/stepper/live-example)                  |
| [@leafygreen-ui/table](./packages/table)                             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/table)](https://www.npmjs.com/package/@leafygreen-ui/table)                             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/table?color=white)               | [Live Example](http://mongodb.design/component/table/live-example)                    |
| [@leafygreen-ui/tabs](./packages/tabs)                               | [![version](https://img.shields.io/npm/v/@leafygreen-ui/tabs)](https://www.npmjs.com/package/@leafygreen-ui/tabs)                               | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/tabs?color=white)                | [Live Example](http://mongodb.design/component/tabs/live-example)                     |
| [@leafygreen-ui/testing-lib](./packages/testing-lib)                 | [![version](https://img.shields.io/npm/v/@leafygreen-ui/testing-lib)](https://www.npmjs.com/package/@leafygreen-ui/testing-lib)                 | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/testing-lib?color=white)         | [Live Example](http://mongodb.design/component/testing-lib/live-example)              |
| [@leafygreen-ui/text-area](./packages/text-area)                     | [![version](https://img.shields.io/npm/v/@leafygreen-ui/text-area)](https://www.npmjs.com/package/@leafygreen-ui/text-area)                     | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/text-area?color=white)           | [Live Example](http://mongodb.design/component/text-area/live-example)                |
| [@leafygreen-ui/text-input](./packages/text-input)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/text-input)](https://www.npmjs.com/package/@leafygreen-ui/text-input)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/text-input?color=white)          | [Live Example](http://mongodb.design/component/text-input/live-example)               |
| [@leafygreen-ui/toast](./packages/toast)                             | [![version](https://img.shields.io/npm/v/@leafygreen-ui/toast)](https://www.npmjs.com/package/@leafygreen-ui/toast)                             | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/toast?color=white)               | [Live Example](http://mongodb.design/component/toast/live-example)                    |
| [@leafygreen-ui/toggle](./packages/toggle)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/toggle)](https://www.npmjs.com/package/@leafygreen-ui/toggle)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/toggle?color=white)              | [Live Example](http://mongodb.design/component/toggle/live-example)                   |
| [@leafygreen-ui/tokens](./packages/tokens)                           | [![version](https://img.shields.io/npm/v/@leafygreen-ui/tokens)](https://www.npmjs.com/package/@leafygreen-ui/tokens)                           | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/tokens?color=white)              | [Live Example](http://mongodb.design/component/tokens/live-example)                   |
| [@leafygreen-ui/toolbar](./packages/toolbar)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/toolbar)](https://www.npmjs.com/package/@leafygreen-ui/toolbar)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/toolbar?color=white)             | [Live Example](http://mongodb.design/component/toolbar/live-example)                  |
| [@leafygreen-ui/tooltip](./packages/tooltip)                         | [![version](https://img.shields.io/npm/v/@leafygreen-ui/tooltip)](https://www.npmjs.com/package/@leafygreen-ui/tooltip)                         | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/tooltip?color=white)             | [Live Example](http://mongodb.design/component/tooltip/live-example)                  |
| [@leafygreen-ui/typography](./packages/typography)                   | [![version](https://img.shields.io/npm/v/@leafygreen-ui/typography)](https://www.npmjs.com/package/@leafygreen-ui/typography)                   | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/typography?color=white)          | [Live Example](http://mongodb.design/component/typography/live-example)               |
| [@leafygreen-ui/vertical-stepper](./packages/vertical-stepper)       | [![version](https://img.shields.io/npm/v/@leafygreen-ui/vertical-stepper)](https://www.npmjs.com/package/@leafygreen-ui/vertical-stepper)       | ![downloads](https://img.shields.io/npm/dm/@leafygreen-ui/vertical-stepper?color=white)    | [Live Example](http://mongodb.design/component/vertical-stepper/live-example)         |
| [@lg-charts/chart-card](./charts/chart-card)                         | [![version](https://img.shields.io/npm/v/@lg-charts/chart-card)](https://www.npmjs.com/package/@lg-charts/chart-card)                           | ![downloads](https://img.shields.io/npm/dm/@lg-charts/chart-card?color=white)              | [Live Example](http://mongodb.design/component/chart-card/live-example)               |
| [@lg-charts/colors](./charts/colors)                                 | [![version](https://img.shields.io/npm/v/@lg-charts/colors)](https://www.npmjs.com/package/@lg-charts/colors)                                   | ![downloads](https://img.shields.io/npm/dm/@lg-charts/colors?color=white)                  | [Live Example](http://mongodb.design/component/colors/live-example)                   |
| [@lg-charts/core](./charts/core)                                     | [![version](https://img.shields.io/npm/v/@lg-charts/core)](https://www.npmjs.com/package/@lg-charts/core)                                       | ![downloads](https://img.shields.io/npm/dm/@lg-charts/core?color=white)                    | [Live Example](http://mongodb.design/component/core/live-example)                     |
| [@lg-charts/drag-provider](./charts/drag-provider)                   | [![version](https://img.shields.io/npm/v/@lg-charts/drag-provider)](https://www.npmjs.com/package/@lg-charts/drag-provider)                     | ![downloads](https://img.shields.io/npm/dm/@lg-charts/drag-provider?color=white)           | [Live Example](http://mongodb.design/component/drag-provider/live-example)            |
| [@lg-charts/legend](./charts/legend)                                 | [![version](https://img.shields.io/npm/v/@lg-charts/legend)](https://www.npmjs.com/package/@lg-charts/legend)                                   | ![downloads](https://img.shields.io/npm/dm/@lg-charts/legend?color=white)                  | [Live Example](http://mongodb.design/component/legend/live-example)                   |
| [@lg-charts/series-provider](./charts/series-provider)               | [![version](https://img.shields.io/npm/v/@lg-charts/series-provider)](https://www.npmjs.com/package/@lg-charts/series-provider)                 | ![downloads](https://img.shields.io/npm/dm/@lg-charts/series-provider?color=white)         | [Live Example](http://mongodb.design/component/series-provider/live-example)          |
| [@lg-chat/chat-button](./chat/chat-button)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-button)](https://www.npmjs.com/package/@lg-chat/chat-button)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-button?color=white)               | [Live Example](http://mongodb.design/component/chat-button/live-example)              |
| [@lg-chat/chat-layout](./chat/chat-layout)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-layout)](https://www.npmjs.com/package/@lg-chat/chat-layout)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-layout?color=white)               | [Live Example](http://mongodb.design/component/chat-layout/live-example)              |
| [@lg-chat/chat-window](./chat/chat-window)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-window)](https://www.npmjs.com/package/@lg-chat/chat-window)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-window?color=white)               | [Live Example](http://mongodb.design/component/chat-window/live-example)              |
| [@lg-chat/input-bar](./chat/input-bar)                               | [![version](https://img.shields.io/npm/v/@lg-chat/input-bar)](https://www.npmjs.com/package/@lg-chat/input-bar)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-chat/input-bar?color=white)                 | [Live Example](http://mongodb.design/component/input-bar/live-example)                |
| [@lg-chat/leafygreen-chat-provider](./chat/leafygreen-chat-provider) | [![version](https://img.shields.io/npm/v/@lg-chat/leafygreen-chat-provider)](https://www.npmjs.com/package/@lg-chat/leafygreen-chat-provider)   | ![downloads](https://img.shields.io/npm/dm/@lg-chat/leafygreen-chat-provider?color=white)  | [Live Example](http://mongodb.design/component/leafygreen-chat-provider/live-example) |
| [@lg-chat/lg-markdown](./chat/lg-markdown)                           | [![version](https://img.shields.io/npm/v/@lg-chat/lg-markdown)](https://www.npmjs.com/package/@lg-chat/lg-markdown)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/lg-markdown?color=white)               | [Live Example](http://mongodb.design/component/lg-markdown/live-example)              |
| [@lg-chat/message](./chat/message)                                   | [![version](https://img.shields.io/npm/v/@lg-chat/message)](https://www.npmjs.com/package/@lg-chat/message)                                     | ![downloads](https://img.shields.io/npm/dm/@lg-chat/message?color=white)                   | [Live Example](http://mongodb.design/component/message/live-example)                  |
| [@lg-chat/message-feed](./chat/message-feed)                         | [![version](https://img.shields.io/npm/v/@lg-chat/message-feed)](https://www.npmjs.com/package/@lg-chat/message-feed)                           | ![downloads](https://img.shields.io/npm/dm/@lg-chat/message-feed?color=white)              | [Live Example](http://mongodb.design/component/message-feed/live-example)             |
| [@lg-chat/message-feedback](./chat/message-feedback)                 | [![version](https://img.shields.io/npm/v/@lg-chat/message-feedback)](https://www.npmjs.com/package/@lg-chat/message-feedback)                   | ![downloads](https://img.shields.io/npm/dm/@lg-chat/message-feedback?color=white)          | [Live Example](http://mongodb.design/component/message-feedback/live-example)         |
| [@lg-chat/message-prompts](./chat/message-prompts)                   | [![version](https://img.shields.io/npm/v/@lg-chat/message-prompts)](https://www.npmjs.com/package/@lg-chat/message-prompts)                     | ![downloads](https://img.shields.io/npm/dm/@lg-chat/message-prompts?color=white)           | [Live Example](http://mongodb.design/component/message-prompts/live-example)          |
| [@lg-chat/message-rating](./chat/message-rating)                     | [![version](https://img.shields.io/npm/v/@lg-chat/message-rating)](https://www.npmjs.com/package/@lg-chat/message-rating)                       | ![downloads](https://img.shields.io/npm/dm/@lg-chat/message-rating?color=white)            | [Live Example](http://mongodb.design/component/message-rating/live-example)           |
| [@lg-chat/rich-links](./chat/rich-links)                             | [![version](https://img.shields.io/npm/v/@lg-chat/rich-links)](https://www.npmjs.com/package/@lg-chat/rich-links)                               | ![downloads](https://img.shields.io/npm/dm/@lg-chat/rich-links?color=white)                | [Live Example](http://mongodb.design/component/rich-links/live-example)               |
| [@lg-chat/suggestions](./chat/suggestions)                           | [![version](https://img.shields.io/npm/v/@lg-chat/suggestions)](https://www.npmjs.com/package/@lg-chat/suggestions)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/suggestions?color=white)               | [Live Example](http://mongodb.design/component/suggestions/live-example)              |
| [@lg-chat/title-bar](./chat/title-bar)                               | [![version](https://img.shields.io/npm/v/@lg-chat/title-bar)](https://www.npmjs.com/package/@lg-chat/title-bar)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-chat/title-bar?color=white)                 | [Live Example](http://mongodb.design/component/title-bar/live-example)                |
| [@lg-tools/build](./tools/build)                                     | [![version](https://img.shields.io/npm/v/@lg-tools/build)](https://www.npmjs.com/package/@lg-tools/build)                                       | ![downloads](https://img.shields.io/npm/dm/@lg-tools/build?color=white)                    |                                                                                       |
| [@lg-tools/cli](./tools/cli)                                         | [![version](https://img.shields.io/npm/v/@lg-tools/cli)](https://www.npmjs.com/package/@lg-tools/cli)                                           | ![downloads](https://img.shields.io/npm/dm/@lg-tools/cli?color=white)                      |                                                                                       |
| [@lg-tools/codemods](./tools/codemods)                               | [![version](https://img.shields.io/npm/v/@lg-tools/codemods)](https://www.npmjs.com/package/@lg-tools/codemods)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-tools/codemods?color=white)                 |                                                                                       |
| [@lg-tools/create](./tools/create)                                   | [![version](https://img.shields.io/npm/v/@lg-tools/create)](https://www.npmjs.com/package/@lg-tools/create)                                     | ![downloads](https://img.shields.io/npm/dm/@lg-tools/create?color=white)                   |                                                                                       |
| [@lg-tools/install](./tools/install)                                 | [![version](https://img.shields.io/npm/v/@lg-tools/install)](https://www.npmjs.com/package/@lg-tools/install)                                   | ![downloads](https://img.shields.io/npm/dm/@lg-tools/install?color=white)                  |                                                                                       |
| [@lg-tools/link](./tools/link)                                       | [![version](https://img.shields.io/npm/v/@lg-tools/link)](https://www.npmjs.com/package/@lg-tools/link)                                         | ![downloads](https://img.shields.io/npm/dm/@lg-tools/link?color=white)                     |                                                                                       |
| [@lg-tools/lint](./tools/lint)                                       | [![version](https://img.shields.io/npm/v/@lg-tools/lint)](https://www.npmjs.com/package/@lg-tools/lint)                                         | ![downloads](https://img.shields.io/npm/dm/@lg-tools/lint?color=white)                     |                                                                                       |
| [@lg-tools/meta](./tools/meta)                                       | [![version](https://img.shields.io/npm/v/@lg-tools/meta)](https://www.npmjs.com/package/@lg-tools/meta)                                         | ![downloads](https://img.shields.io/npm/dm/@lg-tools/meta?color=white)                     |                                                                                       |
| [@lg-tools/slackbot](./tools/slackbot)                               | [![version](https://img.shields.io/npm/v/@lg-tools/slackbot)](https://www.npmjs.com/package/@lg-tools/slackbot)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-tools/slackbot?color=white)                 |                                                                                       |
| [@lg-tools/storybook-addon](./tools/storybook-addon)                 | [![version](https://img.shields.io/npm/v/@lg-tools/storybook-addon)](https://www.npmjs.com/package/@lg-tools/storybook-addon)                   | ![downloads](https://img.shields.io/npm/dm/@lg-tools/storybook-addon?color=white)          |                                                                                       |
| [@lg-tools/storybook-decorators](./tools/storybook-decorators)       | [![version](https://img.shields.io/npm/v/@lg-tools/storybook-decorators)](https://www.npmjs.com/package/@lg-tools/storybook-decorators)         | ![downloads](https://img.shields.io/npm/dm/@lg-tools/storybook-decorators?color=white)     |                                                                                       |
| [@lg-tools/storybook-utils](./tools/storybook-utils)                 | [![version](https://img.shields.io/npm/v/@lg-tools/storybook-utils)](https://www.npmjs.com/package/@lg-tools/storybook-utils)                   | ![downloads](https://img.shields.io/npm/dm/@lg-tools/storybook-utils?color=white)          |                                                                                       |
| [@lg-tools/test](./tools/test)                                       | [![version](https://img.shields.io/npm/v/@lg-tools/test)](https://www.npmjs.com/package/@lg-tools/test)                                         | ![downloads](https://img.shields.io/npm/dm/@lg-tools/test?color=white)                     |                                                                                       |
| [@lg-tools/test-harnesses](./tools/test-harnesses)                   | [![version](https://img.shields.io/npm/v/@lg-tools/test-harnesses)](https://www.npmjs.com/package/@lg-tools/test-harnesses)                     | ![downloads](https://img.shields.io/npm/dm/@lg-tools/test-harnesses?color=white)           |                                                                                       |
| [@lg-tools/update](./tools/update)                                   | [![version](https://img.shields.io/npm/v/@lg-tools/update)](https://www.npmjs.com/package/@lg-tools/update)                                     | ![downloads](https://img.shields.io/npm/dm/@lg-tools/update?color=white)                   |                                                                                       |
| [@lg-tools/validate](./tools/validate)                               | [![version](https://img.shields.io/npm/v/@lg-tools/validate)](https://www.npmjs.com/package/@lg-tools/validate)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-tools/validate?color=white)                 |                                                                                       |
| [@lg-mcp/embeddable-uis](./mcp/embeddable-uis)                       | [![version](https://img.shields.io/npm/v/@lg-mcp/embeddable-uis)](https://www.npmjs.com/package/@lg-mcp/embeddable-uis)                         | ![downloads](https://img.shields.io/npm/dm/@lg-mcp/embeddable-uis?color=white)             |                                                                                       |
| [@lg-mcp/hooks](./mcp/hooks)                                         | [![version](https://img.shields.io/npm/v/@lg-mcp/hooks)](https://www.npmjs.com/package/@lg-mcp/hooks)                                           | ![downloads](https://img.shields.io/npm/dm/@lg-mcp/hooks?color=white)                      |                                                                                       |
| [@lg-mcp/ui-resource-renderer](./mcp/ui-resource-renderer)           | [![version](https://img.shields.io/npm/v/@lg-mcp/ui-resource-renderer)](https://www.npmjs.com/package/@lg-mcp/ui-resource-renderer)             | ![downloads](https://img.shields.io/npm/dm/@lg-mcp/ui-resource-renderer?color=white)       |                                                                                       |

## 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.

---
_Source: https://npm.io/package/@leafygreen-ui/polymorphic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._