Subscription Dialog | VantaUI

ProNew

Interact

Usage

Props

SubscriptionDialog

Prop	Type	Description
`children`	`React.ReactNode`	Trigger and dialog content.
`open`	`boolean`	Controlled visibility.
`defaultOpen`	`boolean`	Initial uncontrolled visibility; false.
`onOpenChange`	`DialogPrimitive.Root.Props["onOpenChange"]`	Receives the next open state and Base UI event details.
`Base UI root props`	`DialogPrimitive.Root.Props`	Other Base UI Dialog root options are forwarded.

SubscriptionDialogTrigger

Prop	Type	Description
`children`	`React.ReactNode`	Trigger label.
`render`	`DialogPrimitive.Trigger.Props["render"]`	Custom trigger element or render function.
`className`	`DialogPrimitive.Trigger.Props["className"]`	Trigger styles.
`Base UI trigger props`	`DialogPrimitive.Trigger.Props`	Native trigger and Base UI options are forwarded.

SubscriptionDialogContent

Prop	Type	Description
`plans`	`readonly SubscriptionPlan[]`	Required plan options. An empty list disables Continue.
`defaultPlanId`	`string`	Initial plan ID; falls back to the first plan.
`defaultBillingPeriod`	`"monthly" \| "yearly"`	Initial billing period; monthly.
`title`	`string`	Heading; Select a plan.
`cancelLabel`	`string`	Desktop close label; Cancel.
`continueLabel`	`string`	Action label; Continue.
`continueDisabled`	`boolean`	Disable Continue while processing; false.
`onContinue`	`(selection: SubscriptionSelection) => void`	Required action callback. Close the controlled dialog or start checkout.
`className`	`string`	Additional popup classes.
`Base UI popup props`	`Omit<DialogPrimitive.Popup.Props, "children" \| "render" \| "className">`	Other Base UI popup options are forwarded.

SubscriptionPlan

Prop	Type	Description
`id`	`string`	Unique plan identifier.
`name`	`string`	Plan name.
`description`	`string`	Short plan summary.
`prices`	`Record<SubscriptionBillingPeriod, number>`	Monthly and yearly totals as numbers, formatted by NumberFlow.
`currency`	`string`	ISO currency code; USD. Formatting uses en-US.
`badge`	`string`	Optional badge, such as Popular.
`featuresLabel`	`string`	Benefits heading; What’s included.
`features`	`readonly string[]`	Benefits shown while selected.

SubscriptionSelection

Prop	Type	Description
`plan`	`SubscriptionPlan`	Selected plan object.
`billingPeriod`	`"monthly" \| "yearly"`	Selected billing period.