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>

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

04

Props

Props for pricing-card
NameTypeDefaultDescription
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 required () => void Called when the CTA button is clicked.
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.