Comparison Table

Product comparison. Pro · Landing pages and brand › Pricing and trust

Installation

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

npm install valyro-ui-pro

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

Prop	Type	Default
`eyebrow`	`ReactNode`		Small label above the title.
`title`	`ReactNode`		Section heading; also the accessible name of the section and the table.
`subtitle`	`ReactNode`		Supporting paragraph under the title.
`products` *	`ComparisonProduct[]`		Columns, left to right: name, description and an optional action in the header cell.
`groups` *	`ComparisonGroup[]`		Feature rows, each group under an optional title row spanning the table.
`label`	`string`	`'Product comparison'`	Accessible name of the table when there is no `title`.
`labels`	`Partial<ComparisonTableLabels>`		Overrides for the built-in English text; keys left out keep their defaults.
`stickyHeaderOffset`	`number \| string`	`0`	Distance from the top of the viewport at which the product header sticks, e.g. the height of a fixed navbar. The header sticks whenever the table fits without horizontal scrolling and no ancestor clips overflow (`overflow: hidden \| auto`).
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the section title (h1–h6).

Pricing Table — Pricing plans
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