Onboarding Pill | VantaUI

ProNew

Interact

Usage

Props

OnboardingPill

Prop	Type	Description
`steps`	`readonly OnboardingPillStep[]`	Controlled checklist. When set, this list is shown instead of internal step state.
`defaultSteps`	`readonly OnboardingPillStep[]`	Initial steps while uncontrolled. Defaults to DEFAULT_ONBOARDING_PILL_STEPS.
`onStepsChange`	`(steps: OnboardingPillStep[], completedStep: OnboardingPillStep) => void`	Called after built-in completion with the next list and the step that was just completed. Not called when onStepClick is set.
`onStepClick`	`(step: OnboardingPillStep) => void`	Takes over step activation. Update steps yourself after the setup action succeeds.
`title`	`string`	Heading in the trigger. Defaults to "Getting Started". Long titles truncate.
`footer`	`React.ReactNode`	Note under the checklist. Defaults to "Complete these steps to get set up." Replaced by the completion message when every step is done. Pass null to hide it.
`open`	`boolean`	Controlled popup visibility.
`defaultOpen`	`boolean`	Whether the popup starts open while uncontrolled. Defaults to false.
`onOpenChange`	`(open: boolean) => void`	Called when the popup opens, closes, or collapses after every step is complete.
`side`	`"top" \| "bottom"`	Preferred popup side. Flips when space is limited. Defaults to "bottom".
`align`	`"start" \| "center" \| "end"`	Horizontal alignment of the popup against the trigger. Defaults to "start".
`popupClassName`	`string`	Classes for the portaled popup surface.
`className`	`string`	Classes for the section wrapper. The default width is max-w-72. Native section attributes other than title are also forwarded.

OnboardingPillStep

Prop	Type	Description
`id`	`string`	Stable unique identifier. Used as the list key and by requires.
`label`	`string`	Step name shown in the row.
`completed`	`boolean`	Marks the step done. Completed steps cannot be activated again. Defaults to false.
`disabled`	`boolean`	Keeps the step locked even when its prerequisites are met. Defaults to false.
`requires`	`readonly string[]`	Ids of steps that must be completed before this one unlocks.
`hint`	`string`	Help text shown beside the label in a BubbleTooltip.
`lockedHint`	`string`	Help text used while the step is locked. Falls back to hint when omitted.

BubbleTooltip

Prop	Type	Description
`content`	`React.ReactNode`	Noninteractive prose inside the bubble. Onboarding Pill passes the step hint here.
`label`	`string`	Accessible name for the help trigger and the action popover.
`children`	`React.ReactElement`	Optional button that replaces the question-mark trigger. It must forward its props and ref to a native button.
`action`	`BubbleTooltipAction`	Optional link or button in the bubble footer. Omit it for a text-only tooltip.
`side`	`"top" \| "right" \| "bottom" \| "left"`	Preferred side of the trigger. Collision handling can flip it. Defaults to "top".
`align`	`"start" \| "center" \| "end"`	Alignment along the chosen side. Defaults to "center".
`sideOffset`	`number`	Gap between the trigger and the bubble, in pixels. Defaults to 8.
`delay`	`number`	Hover open delay in milliseconds. Defaults to 180.
`closeDelay`	`number`	Hover close delay in milliseconds. Defaults to 120.
`open`	`boolean`	Controlled tooltip visibility.
`defaultOpen`	`boolean`	Whether the tooltip starts open while uncontrolled. Defaults to false.
`onOpenChange`	`(open: boolean) => void`	Called when the tooltip opens or closes.
`className`	`string`	Classes for the popup.
`triggerClassName`	`string`	Classes for the trigger. Onboarding Pill sizes the question mark to 16px.

BubbleTooltipAction

Prop	Type	Description
`label`	`string`	Visible action label. Required for both the link and button variants.
`href`	`string`	Destination for the link variant. Do not set onClick when href is set.
`target`	`"_self" \| "_blank"`	Link target. Only used with href. Blank links get rel="noopener noreferrer".
`onClick`	`() => void`	Click handler for the button variant. Do not set href when onClick is set. The bubble closes after the click.