Pricing Table

Pricing plans. Pro · Landing pages and brand › Pricing and trust

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add pricing-table

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { PricingTable } from 'valyro-ui-pro';

Prop	Type	Default
`eyebrow`	`ReactNode`		Small label above the title.
`title`	`ReactNode`		Section heading; also the section's accessible name.
`subtitle`	`ReactNode`		Supporting paragraph under the title.
`plans` *	`PricingPlan[]`		Plan cards in order; from 5 plans they form one row: five fit side by side on a wide container, more scroll sideways.
`billing`	`'monthly' \| 'yearly'`		Controlled `billing`; use with `onBillingChange`.
`defaultBilling`	`'monthly' \| 'yearly'`	`'monthly'`	Initial `billing` when uncontrolled.
`onBillingChange`	`(billing: PricingBillingPeriod) => void`		Called with the new `billing` when it changes.
`currency`	`string`	`'USD'`	ISO 4217 currency code.
`locale`	`string`		BCP 47 locale for price formatting; defaults to the ThemeProvider's, then the browser's.
`yearlyBadge`	`ReactNode`	`'Save 20%'`	Badge on the yearly option; `null` hides it.
`labels`	`Partial<PricingTableLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the section title; plan names use the next level.

Comparison Table — Product comparison
Testimonials — Customer testimonials
FAQ Section — Frequently asked questions
Award Badge — Award badge with a laurel wreath, stars and caption
Hero Section — Landing page hero
Feature Grid — Feature grid
Bento Grid — Responsive bento grid of cards in mixed sizes
Logo Cloud — Customer logos
CTA Section — Call-to-action block
Newsletter Signup — Newsletter signup
App Store Buttons — App store buttons: App Store, Google Play, Galaxy Store, RuStore
Footer — Site footer