SearchCtrlK

  • ↑↓navigate
  • ↵open
  • escclose

Can’t find it? Contact us

PricingBand

Pricing band: a LandingHeader over a grid of plan cards, each with a price, a checked feature list and an action.

Open in a new tab
View code
tsx
<PricingBand
	eyebrow="Pricing"
	title="Plans that grow with your pager"
	description={
		<>
			Every plan checks from six regions. Pay for <strong>more monitors and faster checks</strong>,
			never for seats.
		</>
	}
>
	<PricingBand.Plan
		name="Hobby"
		price="$0"
		period="/month"
		description="For side projects and a personal status page."
		features={
			<>
				<CheckRow>Five monitors</CheckRow>
				<CheckRow>Five-minute checks</CheckRow>
				<CheckRow>Email alerts</CheckRow>
				<CheckRow>One public status page</CheckRow>
			</>
		}
		action={
			<LinkButton href="/examples/signup" color="neutral" variant="surface">
				Start for free
			</LinkButton>
		}
	/>
	<PricingBand.Plan
		name="Team"
		price="$29"
		period="/month"
		featured
		badge={<Badge color="brand">Most popular</Badge>}
		description="For a product team that shares the on-call rotation."
		features={
			<>
				<CheckRow>Fifty monitors</CheckRow>
				<CheckRow>Thirty-second checks</CheckRow>
				<CheckRow>Slack, SMS and webhook alerts</CheckRow>
				<CheckRow>Status pages on your own domain</CheckRow>
				<CheckRow>Ninety days of response history</CheckRow>
			</>
		}
		action={
			<LinkButton href="/examples/signup?plan=team" color="brand">
				Start a 14-day trial
			</LinkButton>
		}
	/>
	<PricingBand.Plan
		name="Business"
		price="$99"
		period="/month"
		description="For companies with an uptime promise in their contracts."
		features={
			<>
				<CheckRow>Two hundred monitors</CheckRow>
				<CheckRow>Ten-second checks</CheckRow>
				<CheckRow>Escalation policies and schedules</CheckRow>
				<CheckRow>SLA reports every month</CheckRow>
				<CheckRow>SAML single sign-on</CheckRow>
			</>
		}
		action={
			<LinkButton href="/examples/pricing" color="neutral" variant="surface">
				Talk to sales
			</LinkButton>
		}
	/>
</PricingBand>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal
npm add @sdxc/ui remix
typescript
import "@sdxc/ui/theme.css";

Usage

typescript
import { PricingBand } from "@sdxc/ui/landing";

Renders a pricing band with a chapter header and a plan grid of one column on a phone, an even count paired from the md container, and columns from lg, evened per plan count with a short last row centred. Each card pushes its action to the foot, so actions in one row line up.

Composition

The parts the component publishes, each a static property of the host.

  • PricingBand
  • PricingBand.PlanOne plan card: name and badge, price with its period, a one-line pitch, the checked features, and the action at the foot.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

PropTypeRequiredDescription
columnsColumnsNoPlans per row from the lg container. Defaults to DEFAULT_COLUMNS.
toneToneNoBand fill. Defaults to DEFAULT_TONE.
eyebrowRemixNodeNoOptional eyebrow above the title.
titleRemixNodeYesSection title — required, always supplied by the page.
descriptionRemixNodeNoSupporting lead under the title.
childrenRemixNodeYesOne PricingBand.Plan per plan, in reading order for wide layouts.
partsPartsPropsNoPer-part styling for title, lead, and plan grid.

Also accepts everything in Omit< LandingSection.Props, "children" | "tone" | "title" | "parts" >.

PricingBand.Plan

PropTypeRequiredDescription
nameRemixNodeYesPlan name, rendered as the card's heading one level below the band title.
priceRemixNodeYesThe amount, drawn large in tabular figures ("$29", "Free").
periodRemixNodeNoBilling period beside the amount, drawn muted ("/month").
descriptionRemixNodeNoOne line on who the plan is for.
featuresRemixNodeNoCheckRow items; the card lays them in a CheckList.
actionRemixNodeYesThe plan's call to action, stretched across the card's foot. Its button or link takes the landing CTA radius, weight and edge; leave size at the 40px default.
featuredbooleanNoInverts the card, lifts it, and moves it first while plans stack.
badgeRemixNodeNoA short label beside the name, such as "Most popular".

Also accepts everything in Omit<TagProps<"div">, "children">.

@sdxc/ui

Can’t find it? Contact us