PricingPlan

A complete plan card with a price, billing period, feature list and navigation action.

PricingPlan

View source · API reference

A plan with all its context

The price and period are display text, so the application owns currency formatting and billing logic.

Example

Team workspace

An illustrative plan for a small team.

$24 per month, billed monthly
Explore the components
  • Shared component library
  • Theme-aware documentation
Demo pricing only. No purchase is available. 
<PricingPlan
  title="Team workspace"
  summary="An illustrative plan for a small team."
  price="$24"
  period="per month, billed monthly"
  badge="Example"
  note="Demo pricing only. No purchase is available."
  icon="lucide:check"
  ctaLabel="Explore the components"
  ctaLink="/components/"
  tone="accent"
>
  <PricingFeature>Shared component library</PricingFeature>
  <PricingFeature>Theme-aware documentation</PricingFeature>
</PricingPlan>

A quiet plan without an action

Omit either CTA prop to leave out the link. A note can explain how to proceed.

Custom workspace

A configuration you define.

Custom
  • Flexible composition
Use this layout with your own plan data. 
<PricingPlan
  title="Custom workspace"
  summary="A configuration you define."
  price="Custom"
  note="Use this layout with your own plan data."
  variant="outline"
>
  <PricingFeature>Flexible composition</PricingFeature>
</PricingPlan>

Behavior and accessibility

Use clear billing text and disclose relevant limits alongside the price. A CTA is rendered only when both ctaLabel and ctaLink are set. There is no checkout behavior built into the component.

API reference

PricingPlan contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

summary

RefOrValue<string>
Default
not set

A concise explanation beneath the heading.

price

RefOrValue<string>
Default
not set

Display price. May include currency or non-numeric text.

period

RefOrValue<string>
Default
not set

Billing period displayed with the price.

badge

RefOrValue<string>
Default
not set

Optional compact label rendered with Badge.

note

RefOrValue<string>
Default
not set

Supporting note after the features and action.

variant

RefOrValue<ComponentVariant>
Default
surface

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

variantMode

RefOrValue<ComponentVariantMode>
Default
stateless

Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.

icon

RefOrValue<string>
Default
not set

Registered SVG icon name. In browser apps, include the icon in the resolver passed to defineIconComponents.

ctaLabel

RefOrValue<string>
Default
not set

CTA link text. Requires ctaLink.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

Composition

Default slot: PricingFeature list items inside the generated ul. Register definePricingComponents and its layout, text, button and icon dependencies.