Pricing
Plan Comparison Table
A full plan comparison table: rows grouped into sections, a sticky header with prices and buttons, and side-scrolling on a narrow block.
What you can change
- the eyebrow and title copy above the table
- the plans array: name, price, href and the featured flag of each column
- the groups array: the section heading and the rows with their values
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/pricing-004?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
A server component, one file, zero dependencies. The --vibeui-pricing-004-* palette is declared through light-dark(), so the block follows the surrounding color-scheme; the section has no background by default and one is turned on by the background prop, while the table sits on its own surface --vibeui-pricing-004-card. The markup is a real table with several <tbody> elements: the section heading is put into a <th scope="colgroup"> with colspan, so a screen reader announces both the section and the column. The header with the prices rests on position:sticky, otherwise on a long table it is lost which column is which. The wrapper carries overflow-x:auto and the table a min-width:40rem. A true value is drawn with the word from valueText.yes, false with the one from valueText.no.
Tags
- pricing
- comparison
- table
- grouped
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…