# @leafygreen-ui/guide-cue
> leafyGreen UI Kit GuideCue
Latest version **8.2.1** (published 2026-10-02) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install @leafygreen-ui/guide-cue
pnpm add @leafygreen-ui/guide-cue
yarn add @leafygreen-ui/guide-cue
bun add @leafygreen-ui/guide-cue
```
## 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.2.1 |
| Published | 2026-10-02 |
| First published | 2022-10-04 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 220.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Maintainers | thesonofthomp, shaneeza, stephl3, aitchpgm, hnevins, _tsck |
## Links
- npm: https://www.npmjs.com/package/@leafygreen-ui/guide-cue
- Repository: https://github.com/mongodb/leafygreen-ui
- Homepage: https://github.com/mongodb/leafygreen-ui/tree/main/packages/guide-cue
- Issues: https://jira.mongodb.org/projects/PD/summary
- npm.io page: https://npm.io/package/@leafygreen-ui/guide-cue
## Dependencies (14)
- [polished](https://npm.io/package/polished.md) ^4.2.2
- [focus-trap](https://npm.io/package/focus-trap.md) 6.9.4
- [focus-trap-react](https://npm.io/package/focus-trap-react.md) 9.0.2
- [@leafygreen-ui/lib](https://npm.io/package/@leafygreen-ui/lib.md) ^15.7.1
- [@leafygreen-ui/a11y](https://npm.io/package/@leafygreen-ui/a11y.md) ^3.0.6
- [@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/button](https://npm.io/package/@leafygreen-ui/button.md) ^25.2.2
- [@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/popover](https://npm.io/package/@leafygreen-ui/popover.md) ^14.3.3
- [@leafygreen-ui/tooltip](https://npm.io/package/@leafygreen-ui/tooltip.md) ^14.3.3
- [@leafygreen-ui/typography](https://npm.io/package/@leafygreen-ui/typography.md) ^22.2.5
- [@leafygreen-ui/icon-button](https://npm.io/package/@leafygreen-ui/icon-button.md) ^17.1.6
## Recent versions
- 8.2.1 (latest) — 2026-10-02
- 5.0.6-popover.0 (popover) — 2024-01-16
- 4.0.9 (beta) — 2023-07-26
- 5.0.0-alpha.1 (alpha) — 2023-07-20
- 4.0.6-next.7 (next) — 2023-05-26
- 8.2.0 — 2025-11-24
- 8.1.1 — 2025-11-13
- 8.1.0 — 2025-10-21
- 8.0.6 — 2025-09-10
- 8.0.5 — 2025-09-03
- 8.0.4 — 2025-07-07
- 8.0.3 — 2025-07-03
- 8.0.2 — 2025-06-30
- 8.0.1 — 2025-06-16
- 8.0.0 — 2025-05-29
- … 53 more at https://npm.io/package/@leafygreen-ui/guide-cue/versions
## README
# GuideCue
#### [View on MongoDB.design](https://www.mongodb.design/component/guide-cue/live-example/)
## Installation
### PNPM
```shell
pnpm add @leafygreen-ui/guide-cue
```
### Yarn
```shell
yarn add @leafygreen-ui/guide-cue
```
### NPM
```shell
npm install @leafygreen-ui/guide-cue
```
## Example
### Stand-alone example
```js
import { GuideCue } from '@leafygreen-ui/guide-cue';
const [open, setOpen] = useState(true);
{
// do something
}}
>
This is a new feature. You should try it out
;
```
or
### Multi-step example
```js
import GuideCue from '@leafygreen-ui/guide-cue';
const [open, setOpen] = useState(true);
{
// do something
}}
onDismiss={() => {
// do something
}}
>
This is a new feature. You should try it out
;
```
An example of how to use the multi-step tooltip can be found in (storybook - MultistepDemo)[https://github.com/mongodb/leafygreen-ui/blob/main/packages/guide-cue/src/GuideCue.story.tsx]
## Usage
There are two variations of the tooltip -- stand-alone and multi-step. The multi-step tooltip shows the number of steps, has a dismiss and primary button, and displays a pulsing beacon while the stand-alone tooltip only shows the primary button and does not include the number of steps or the dismiss button.
The variant that is shown depends on the number of steps. If `numberOfSteps > 1` the multi-step tooltip is shown else the stand-alone tooltip is shown.
## Properties
| Prop | Type | Description | Default |
| ---------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `open` | `boolean` | Determines if the `Tooltip` will appear as open or close. | `false` |
| `setOpen` | `function` | Callback to change the open state of the Tooltip. | `(boolean) => boolean` |
| `refEl` | `HTMLElement` | Reference to an element that the tooltip should be positioned against. | `null` |
| `numberOfSteps` | `number` | Used to determine which tooltip will be shown. If `numberOfSteps > 1` then the multi-step tooltip will be shown else the stand-alone tooltip will be shown. This number will only be displayed in the multi-step tooltip. | `1` |
| `currentStep` | `number` | Used to display the current step. If `numberOfSteps === 1` this number will not display. | `1` |
| `darkMode` | `boolean` | Determines whether the `Tooltip` will appear in dark mode. | `false` |
| `title` | `string` | Title to appear inside of Tooltip. | `''` |
| `children` | `React.ReactNode` | Body content to appear inside the tooltip, under the title. | `''` |
| `buttonText` | `string` | Text to appear inside the primary button. The default text for the stand-alone tooltip is `Got it`. The default text for the multi-step tooltip varies on the `numberOfSteps` and `currentStep`. If `numberOfSteps === currentStep` the text is `Got it` else it is `Next. | `'Next'` |
| `onDismiss` | `function` | Callback fired when the dismiss(X) button is clicked or when the `Esc` key is pressed. This only applies to the multi-step tooltip. | `() => {}` |
| `onPrimaryButtonClick` | `function` | Callback fired when the bottom primary button is clicked. This applies to both the stand-alone and multi-step tooltip. This is also fired when the `Esc` key is pressed in the stand-alone tooltip. | `() => {}` |
| `tooltipClassName` | `string` | ClassName to be applied to the tooltip element. | `''` |
| `tooltipAlign` | `'top'` \| `'bottom'` \| `'left'` \| `'right'` | Determines the alignment of the tooltip. | `top` |
| `tooltipJustify` | `'start'` \| `'middle'` \| `'end'` | Determines the justification of the tooltip. | `middle` |
| `beaconAlign` | `'top'` \| `'bottom'` \| `'left'` \| `'right'` \| `'center-horizontal'` \| `'center-vertical'` | Determines the alignment of the beacon(animated pulsing circle that appears on top of the trigger element). This only applies to the multi-step tooltip. | `center-horizontal` |
| ... | native `div` attributes | Any other props will be spread on the tooltip `div` element | |
---
_Source: https://npm.io/package/@leafygreen-ui/guide-cue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._