PricingCard
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Single#
Loading…
Grid#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| tier * | ReactNode | — | Tier name — e.g., `Pro`, `Team`. |
| price * | ReactNode | — | Headline price, e.g. `$29` or `Talk to us`. |
| priceUnit | ReactNode | — | Optional small unit rendered next to the price, e.g. `/ user / mo`. |
| description | ReactNode | — | Short description below the tier name. |
| features * | readonly ReactNode[] | — | Feature bullet list. |
| action | ReactNode | — | Action button (typically a `<Button>`). |
| featured | boolean | undefined | — | Highlight as the recommended tier. |
| tierAs | enum | h3 | Heading level for the tier name. Default `'h3'` — pricing tables live under a section `h2` on most pricing pages. |
| priceCurrency | string | undefined | — | ISO 4217 currency code (e.g. `'USD'`, `'EUR'`). REQUIRED to emit the `Offer` JSON-LD — without it the script is suppressed. |
| priceAmount | number | undefined | — | Explicit machine-readable price (number). When omitted, parsed from the visible `price` string by stripping non-numeric characters. Pass this directly when `price` is JSX or contains unusual formatting. |
| availability | string | undefined | — | schema.org `availability` URL, typically `'https://schema.org/InStock'`. |
| url | string | undefined | — | Optional URL of the tier's product/checkout page. |
| tierName | string | undefined | — | String version of `tier` for the JSON-LD `name`. Required if `tier` is JSX. |
| descriptionText | string | undefined | — | String version of `description` for the JSON-LD `description`. |
| noStructuredData | boolean | undefined | — | Opt out of emitting the `Offer` JSON-LD script. |