page templates

<tc-block-pricing>

A pricing page driven by a single JSON tiers prop — cards, features, a featured plan, and a select event.

import "@ra9/tan-compose-kit/blocks/pricing"

Props

Name	Type	Default	Description
`title`	`string`	`"Simple, transparent pricing"`	Page heading.
`subtitle`	`string`	`"Start free and scale as you grow. Cancel anytime."`	Text under the heading.
`currency`	`string`	`"$"`	Prefixed before numeric prices. Omitted for non-numeric prices like "Custom".
`tiers`	`Array<Tier> (json)`	`[Starter, Pro, Enterprise]`	Tier = { name, price, period, description, badge?, featured?, cta, features: string[] }.

Events

Event	Detail	When
`tc-block-pricing-select`	`{ tier }`	Fires when a plan's CTA button is activated.

CSS variables

Variable	Default	Description
`--tc-block-surface`	`var(--tc-color-surface, #ffffff)`	Card background.
`--tc-block-rule`	`var(--tc-color-rule, #ece5d3)`	Card border.
`--tc-block-radius`	`var(--tc-radius-lg, 12px)`	Card corner radius.
`--tc-block-shadow`	`var(--tc-shadow-md, …)`	Card shadow.
`--tc-block-featured-border`	`var(--tc-color-accent, #a16939)`	Border color of the featured tier.
`--tc-block-font`	`var(--tc-font-sans, …)`	Font family.

Examples

<tc-block-pricing> renders the whole pricing page from one JSON prop, so your plan data can come straight from a CMS or an API response. Set featured: true to highlight the plan you want to push, and read the selection from a single event.

Basic usage

<tc-block-pricing></tc-block-pricing>

import "@ra9/tan-compose-kit/blocks/pricing"; const pricing = document.querySelector("tc-block-pricing"); pricing.tiers = [ { name: "Starter", price: "0", period: "/month", description: "For individuals getting started.", cta: "Start for free", features: ["Up to 3 projects", "Community support"], }, { name: "Pro", price: "29", period: "/month", description: "For growing teams.", cta: "Start 14-day trial", featured: true, badge: "Most popular", features: ["Unlimited projects", "Advanced analytics", "Priority support"], }, ]; pricing.addEventListener("tc-block-pricing-select", (e) => { checkout(e.detail.tier); });

Non-numeric prices

A price like "Custom" skips the currency prefix automatically:

<tc-block-pricing currency="€"></tc-block-pricing>

pricing.tiers = [ { name: "Enterprise", price: "Custom", period: "", cta: "Contact sales", features: ["SSO & SCIM"] }, ];

The blocks demo previews all five page templates with a switcher, including this one.

← All components