# @leafygreen-ui/inline-definition

> leafyGreen UI Kit Inline Definition

Latest version **9.2.2** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.2.2 |
| Published | 2026-10-02 |
| First published | 2020-09-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 78.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 274 |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |

## Links

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

## Dependencies (5)

- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/tokens](https://npm.io/package/@leafygreen-ui/tokens.md) ^4.2.3
- [@leafygreen-ui/emotion](https://npm.io/package/@leafygreen-ui/emotion.md) ^5.2.1
- [@leafygreen-ui/palette](https://npm.io/package/@leafygreen-ui/palette.md) ^5.0.3
- [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.3.3

## Recent versions

- 9.2.2 (latest) — 2026-10-02
- 6.0.15-popover.0 (popover) — 2024-01-16
- 6.0.8 (beta) — 2023-07-26
- 7.0.0-alpha.1 (alpha) — 2023-07-20
- 6.0.6-next.7 (next) — 2023-05-26
- 4.1.0-test.0 (test) — 2022-09-22
- 9.2.1 — 2026-01-21
- 9.2.0 — 2026-01-14
- 9.1.4 — 2025-11-24
- 9.1.3 — 2025-11-13
- 9.1.2 — 2025-10-31
- 9.1.1 — 2025-10-21
- 9.1.0 — 2025-10-07
- 9.0.5 — 2025-09-10
- 9.0.4 — 2025-09-03
- … 66 more at https://npm.io/package/@leafygreen-ui/inline-definition/versions

## README

# Inline Definition

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/inline-definition.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/inline-definition/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/inline-definition
```

### Yarn

```shell
yarn add @leafygreen-ui/inline-definition
```

### NPM

```shell
npm install @leafygreen-ui/inline-definition
```

## Example

```js
<H2>
  <InlineDefinition definition={shardDefinition}>Shard</InlineDefinition> your
  cluster
</H2>
```

## Properties

| Prop                    | Type                                     | Description                                                                                                                                | Default   |
| ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| `definition` (Required) | `React.ReactNode`                        | Content that describes the term. Will appear inside Tooltip.                                                                               |           |
| `children`              | `string`                                 | Text that will appear underlined                                                                                                           |           |
| `className`             | `string`                                 | className will be applied to the trigger element                                                                                           |           |
| `align`                 | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the tooltip relative to the component's children.                                                    | `'top'`   |
| `justify`               | `'start'`, `'middle'`, `'end'`           | Determines the preferred justification of the tooltip (based on the alignment) relative to the element passed to the component's children. | `'start'` |
| `darkMode`              | `boolean`                                | Determines if the component will appear in dark mode.                                                                                      | `false`   |
| `tooltipClassName`      | `string`                                 | className to be applied to the tooltip element                                                                                             |           |

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