Comparison Table

Сравнение продуктов. Pro · Лендинги и бренд › Тарифы и доверие

Установка

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).