PricingPlan

title is the plan's name, and the first thing read on the card. Keep it to the word a customer would use in a sentence — 'I'm on Pro' — not a marketing phrase.

description is the one line under the name saying who the plan is for. It's what saves a reader from comparing four feature lists to work out which column is theirs.

badge is the pill beside the name — 'Most popular', 'Save 20%'. A bare string takes the plan's own color; pass an object to color it yourself. It's a claim about the plan, so use it on exactly one plan in a row, and pair it with highlight.

price is a string, never a number: currency symbol, separators and locale are the app's to decide, and a plan whose price is 'Free' or 'Custom' isn't a number at all. Format it however your pricing page already does.

discount is what the plan costs right now, when that's less than price. Setting it strikes price out and promotes this to the headline figure — so a plan on offer sets both, and price on its own is the ordinary case. It's named after the offer rather than after the number, matching Nuxt UI.

billingCycle is what the price buys, printed right after it — '/month', '/seat', '/1,000 credits'. Without it a bare figure means nothing; with it the price row reads as one sentence.

billingPeriod is when the money actually moves, in small print under the price. It's the line that keeps a monthly figure honest when the plan is billed a year at a time — the single most common complaint about a pricing page. A compact plan has no room for a second line, so it hangs the same text off an Info beside the billing cycle instead.

features renders as a CheckList. A bare string is an included feature; an object is a full CheckListItem, so checked: false tones a feature down as something this plan leaves out, and description adds a second line under it.

button is the call to action. Give it a to for a plain link, or leave it off and handle select when signing up has to run something first. Its color follows the plan and its variant follows highlight, so a row of plans gets one loud button and the rest quiet without setting either.

terms is the small print under the button — 'No credit card required', 'Prices exclude VAT', 'Cancel any time'. It belongs under the button because that's where the hesitation is.

highlight marks the plan you're recommending: the same card variant in the plan's color, and a button that goes solid unless it sets its own variant. Exactly one plan in a row should have it — two recommendations are none.

scale grows the card slightly above its neighbours from md up. It only means anything beside other plans, so PricingPlans applies it to the highlighted plan for you rather than making you set it per card.

horizontal moves the price and button beside the features instead of under them — for a plan that stands on its own, like a lifetime deal or an add-on above a comparison table. It stacks back to vertical below md, so it's safe on a phone. Both densities have both directions, so it combines with layout rather than excluding it.

color is the accent, not the card: the highlighted card, the feature checkmarks, the button, and an uncolored badge. The card itself only takes the color when the plan is highlighted.

layout sets the density. compact tightens the padding, drops the type a size and collapses the features to a dot-separated summary instead of a CheckList — for wherever the plans are a control rather than a pitch. It combines with orientation: horizontal gives the one-line switcher row, vertical a small card that still fits a lineup.

variant is the card itself, named after Card's variants. subtle is a raised panel with a faint ring; soft a flat tint with no ring, for plans on a page that's already busy; outline just the ring on the page background, the quietest of the three. A highlighted plan keeps its variant and only changes colour.

The component never derives one price from another — it renders the strings it's given. Keep the billing period in your own state and compute the price props from it, which is also what lets the annual figure carry its own discount and billingPeriod.