Data Display

PricingCard

Presents a single pricing plan with its name, price, feature list, and a call-to-action button.

import { PricingCard } from '@lostgradient/cinder/pricing-card';
pricingplan
01

Overview

Presents a single pricing plan with its name, price, feature list, an optional caveat line, and a call-to-action button, with a selectable/active state.

Usage

svelte 
<script lang="ts">
  import PricingCard from '@lostgradient/cinder/pricing-card';
</script>

<div style="max-inline-size: 22rem;">
  <PricingCard
    name="Growth"
    price="$29/mo"
    features={['Unlimited projects', '50 GB storage', 'Email & chat support', 'Advanced analytics']}
    caveat="Billed annually. Monthly billing available at $35/mo."
    callToActionLabel="Start free trial"
    onPlanSelect={() => {}}
  />
</div>

Pass href (plus optional target/rel) to render the CTA as a link instead of a button. onPlanSelect is optional in that case, but not mutually exclusive with href — pass both to navigate and still run a side effect such as analytics:

svelte 
<PricingCard
  name="Pro"
  price="$29/mo"
  features={['Unlimited projects', '50 GB storage', 'Priority support']}
  callToActionLabel="Continue to checkout"
  href="/checkout?plan=pro"
  target="_blank"
  rel="noopener noreferrer"
  onPlanSelect={() => {
    // e.g. track an analytics event before navigation
  }}
/>

Guidance

Use When

  • Letting users compare and select subscription tiers or product plans.
  • Highlighting one tier as selected or recommended in a pricing comparison.

Avoid When

  • Showing generic grouped content without a distinct price or CTA — use card instead.
  • Displaying a single key metric in isolation — use statistic or statistic-group instead.
Live preview

Pricing for teams of every size

Start free, then scale with advanced collaboration and enterprise controls.

  • Starter

    $0

    • 3 projects
    • Community support

  • Pro

    Selected

    $49 / month

    • Unlimited projects
    • Priority support
    • Team roles

  • Enterprise

    Contact us

    • SSO + SCIM
    • Audit logs
    • Dedicated support
02

When to use

Use when
  • Letting users compare and select subscription tiers or product plans.
  • Highlighting one tier as selected or recommended in a pricing comparison.
Avoid when
  • Showing generic grouped content without a distinct price or CTA — use card instead.
  • Displaying a single key metric in isolation — use statistic or statistic-group instead.
03

Examples

Pricing section

A full pricing-section recipe: Container frames a heading and supporting copy above a responsive grid of PricingCard plans with selection.

Pricing tiers

Three plan tiles side by side with one pre-selected.

With caveat

A pricing card with a consumer-supplied caveat beneath the feature list, useful for legal disclaimers or billing notes.

Linking to checkout

When the CTA should navigate rather than run in-page logic, pass href (and optionally target/rel) and the CTA renders as an anchor. onPlanSelect is still called if provided, useful for analytics.

04

Props

Props for pricing-card
Name
Type
Default
Description
name required text Plan name displayed as the card heading.
price required text Price string, e.g. "$9/mo" or "Free". Rendered verbatim — include any currency symbol and billing period.
features required string[] List of feature strings to display. Rendered as a bulleted list.
callToActionLabel required text Label for the call-to-action button.
onPlanSelect () => void Called when the CTA is activated. Required when href is not set — the button is the only way to activate the CTA. Optional when href is set, but not mutually exclusive with it — pass both to navigate and also run a side effect such as analytics tracking (mirrors the cinder Button anchor branch).
href discriminated-union
target HTMLAnchorAttributes['target'] target for the CTA anchor.
rel HTMLAnchorAttributes['rel'] rel for the CTA anchor.
caveat text Optional footnote or caveat displayed beneath the features list. Use for legal disclaimers, billing notes, or conditional terms. Rendered in a visually subdued style to distinguish it from the main feature list. Accepts plain text or a snippet (e.g. a terms link). Snippet content is rendered inside a <p> — emit phrasing content only (text, inline formatting, links), never block elements.
selected boolean false Whether this card represents the currently selected plan. Sets data-cinder-selected and aria-current="true" on the root element.