# @leafygreen-ui/pipeline > LeafyGreen UI Kit Pipeline Latest version **8.0.11** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @leafygreen-ui/pipeline pnpm add @leafygreen-ui/pipeline yarn add @leafygreen-ui/pipeline bun add @leafygreen-ui/pipeline ``` ## 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 | 8.0.11 | | Published | 2026-10-02 | | First published | 2020-01-06 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 8 | | Unpacked size | 279.7 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/pipeline - Repository: https://github.com/mongodb/leafygreen-ui - Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/pipeline - Issues: https://jira.mongodb.org/projects/PD/summary - npm.io page: https://npm.io/package/@leafygreen-ui/pipeline ## Dependencies (8) - [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1 - [@leafygreen-ui/icon](https://npm.io/package/@leafygreen-ui/icon.md) ^14.9.1 - [@leafygreen-ui/hooks](https://npm.io/package/@leafygreen-ui/hooks.md) ^9.3.2 - [@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 - [react-intersection-observer](https://npm.io/package/react-intersection-observer.md) ^8.25.1 ## Recent versions - 8.0.11 (latest) — 2026-10-02 - 5.0.18-popover.0 (popover) — 2024-01-16 - 5.0.10 (beta) — 2023-07-26 - 6.0.0-alpha.1 (alpha) — 2023-07-20 - 5.0.8-next.7 (next) — 2023-05-26 - 2.2.0-test.0 (test) — 2022-09-22 - 8.0.10 — 2026-01-21 - 8.0.9 — 2025-11-24 - 8.0.8 — 2025-11-13 - 8.0.7 — 2025-10-31 - 8.0.6 — 2025-10-21 - 8.0.5 — 2025-09-25 - 8.0.4 — 2025-09-10 - 8.0.3 — 2025-07-03 - 8.0.2 — 2025-06-30 - … 74 more at https://npm.io/package/@leafygreen-ui/pipeline/versions ## README # Pipeline ![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/pipeline.svg) #### [View on MongoDB.design](https://www.mongodb.design/component/pipeline/live-example/) ## Installation ### PNPM ```shell pnpm add @leafygreen-ui/pipeline ``` ### Yarn ```shell yarn add @leafygreen-ui/pipeline ``` ### NPM ```shell npm install @leafygreen-ui/pipeline ``` ### Example ```js $match $addFields $limit ``` ## Properties | Prop | Type | Description | Default | | ----------- | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `className` | `string` | Adds a className to the class attribute. | `''` | | `children` | `node` | The content that will render inside of the component. If any nodes other than `Stage` components are passed in as children, the `Pipeline` component will automatically wrap them with `Stage` components. | `undefined` | | `size` | `'xsmall'`, `'small'`, `'normal'`, `'large'` | Sets the size variant of the Pipeline. | `'xsmall'` | | `darkMode` | `boolean` | Determines if the component renders in dark theme | `false` | | ... | native `div` attributes | Any other props will be spread on the root `div` element | | _All other props will be spread onto the root element._ # Stage ## Properties | Prop | Type | Description | Default | | ----------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `className` | `string` | Adds a className to the class attribute. | `''` | | `children` | `node` | The content that will render inside of the component. | `undefined` | | `threshold` | `number` \| `number[]` | Either a single number or an array of numbers which indicate at what percentage of the target's visibility, the observer's callback should be executed. | `0.8` | | ... | native `li` attributes | Any other props will be spread on the root `li` element | | _The Pipeline component will decorate the child Stage components with the `size` and `darkMode` prop that it is supplied with._ --- _Source: https://npm.io/package/@leafygreen-ui/pipeline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._