ComponentsMembership
Pricing Table
Live Ghost tiers, prices, currencies and benefits with tier-specific Portal checkout.
Install
npx ghostcn@1.4.0 add pricing-table --skip-existingUsage
Displays active public Ghost tiers with their actual prices, currencies, and benefits. Portal links use the configured tier and billing interval. It may render nothing depending on membership settings. Card text inherits the local foreground; pair custom light/dark backgrounds with readable text colors.
{{> "components/pricing-table"}}Customize this instance
{{> "components/pricing-table"
class="mx-auto my-10 max-w-5xl"
cardClass="rounded-2xl bg-purple-50 text-purple-950 dark:bg-purple-950 dark:text-purple-50 p-8"
}}Styling parameters
| Parameter | Target |
|---|---|
class | Component root — .gh-pricing |
titleClass | .gh-pricing-title |
gridClass | .gh-pricing-grid |
cardClass | .gh-pricing-card |
buttonClass | .ghcn-button |
cardTitleClass | .gh-pricing-card-title |
descriptionClass | .gh-pricing-description |
priceClass | .gh-pricing-price |
benefitsClass | .gh-pricing-benefits |
Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.
Installed files
partials/components/pricing-table.hbsassets/css/components/pricing-table.css
Was this helpful?