PricingTable

A responsive plan comparison with a section heading, configurable columns and independent plan surfaces.

PricingTable

View source · API reference

A complete plan comparison

These illustrative plans link to documentation; they do not represent PureStack pricing.

ILLUSTRATIVE PLANS

Choose a starting point

The same structure works for real product plans.

Example content only.

Explore

Learn the component model.

Free
Browse guides
  • Complete examples
  • Copyable source
Documentation example
Start here

Build

Compose your own interface.

Your choice
Start with Panel
  • Shared theme
  • Typed component props
Illustrative plan, not a product offer 
<PricingTable
  eyebrow="ILLUSTRATIVE PLANS"
  title="Choose a starting point"
  subtitle="The same structure works for real product plans."
  columnsLg="2"
  columnsXl="2"
  footnote="Example content only."
>
  <PricingPlan
    title="Explore"
    summary="Learn the component model."
    price="Free"
    note="Documentation example"
    ctaLabel="Browse guides"
    ctaLink="/components/"
    tone="neutral"
  >
    <PricingFeature>Complete examples</PricingFeature>
    <PricingFeature>Copyable source</PricingFeature>
  </PricingPlan>
  <PricingPlan
    title="Build"
    summary="Compose your own interface."
    price="Your choice"
    badge="Start here"
    note="Illustrative plan, not a product offer"
    ctaLabel="Start with Panel"
    ctaLink="/components/layout/panel/"
    tone="accent"
  >
    <PricingFeature>Shared theme</PricingFeature>
    <PricingFeature>Typed component props</PricingFeature>
  </PricingPlan>
</PricingTable>

A single plan

Set each relevant breakpoint when the table should remain one column.

Explore

Learn the component model.

Free
Browse guides
  • Complete examples
  • Copyable source
Documentation example 
<PricingTable columns="1" columnsLg="1" columnsXl="1" variant="outline">
  <PricingPlan
    title="Explore"
    summary="Learn the component model."
    price="Free"
    note="Documentation example"
    ctaLabel="Browse guides"
    ctaLink="/components/"
    tone="neutral"
  >
    <PricingFeature>Complete examples</PricingFeature>
    <PricingFeature>Copyable source</PricingFeature>
  </PricingPlan>
</PricingTable>

Behavior and accessibility

Keep prices, billing periods and limitations explicit. Plan headings are h3 under the table’s h2. The table lays out cards; it does not calculate prices, process payments or synchronize feature rows.

API reference

PricingTable 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.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

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

subtitle

RefOrValue<string>
Default
not set

Supporting text beneath the title.

footnote

RefOrValue<string>
Default
not set

Supporting note below the section description.

tone

RefOrValue<SemanticTone>
Default
inherited

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

variant

RefOrValue<ComponentVariant>
Default
none

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.

columns

RefOrValue<number | string>
Default
1

Column count from 1 to 12, or a CSS track list such as minmax(0, 1fr) auto. Numeric counts are clamped.

columnsLg

RefOrValue<number | string>
Default
2

Column count or CSS track list at the theme’s lg breakpoint and above.

columnsXl

RefOrValue<number | string>
Default
4

Column count or CSS track list at the theme’s xl breakpoint and above.

Composition

Default slot: PricingPlan cards. Register definePricingComponents with Panel, SectionHeader, Grid, Flex, Badge, BtnLink and Icon dependencies.