Hero

Two Paths Hero

A hero with a fork instead of a single button: two equal path cards, each with its own three-item list and its own link. Neither path is picked out in colour, and the section follows the surrounding theme.

What you can change

the eyebrow, title, lede and footnote copy
the contents of both paths: title, description, points and the href
the action caption in each card

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Theme

Headline

Eyebrow

Accent

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/hero-016?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Theme

Headline

Eyebrow

Accent

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/hero-016?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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-hero-016-* palette is built on light-dark(): a neutral light base and a separate dark pair where the card is lighter than the background and the border lighter than the card. There is no backdrop by default — the section lies on the page background, and the background prop turns it on and sets color-scheme according to the lightness of the given colour. The card is clickable in its entirety thanks to the stretched ::after pseudo-link on the <a>, yet the accessibility tree gets one link per path rather than three. The focus ring is drawn on the card through :focus-within, so keyboard navigation is visible even though the link itself looks like ordinary text. The icons are inline SVG, different for the two paths. From 40rem the cards stand in two columns through a container query.