Pricing
Single Plan Panel
One plan and everything in it: the price with a struck-through old price on the left, the full list in two columns on the right. There is nothing to choose between, and the section uses that.
What you can change
- the eyebrow, title, lede and guarantee copy
- the price, period and oldPrice values
- includedTitle and the included list of up to ten items
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-005?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-005-* palette, a dark violet base with a warm accent. The old price is marked up as <s>: this is not styling but semantics — a screen reader will announce it as deleted. The list is long on purpose: with a single plan the list of what is included replaces a comparison with neighbours, so it takes up a large share of the card and is laid out in two columns from 34rem. The card layout: one column up to 56rem, two columns from 56rem through a container query.
Tags
- pricing
- single
- dark
- included
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…