Pricing table

Monthly/yearly toggle over the pricing tiers in its slot.

Marketing

Pack defaults

With content

In context

Source

import { PricingTable } from "demo-landing/components";

const props = {
  "defaultBilling": "monthly",
  "currency": "USD",
  "yearlyNote": "Save 20% when billed yearly"
};
<PricingTable {...props} />

Live CSS

Injected into the previews above. Pricing table

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */