Separator
Icon Center Divider
A divider with a glyph in a disc at the centre of the line: the disc carries its own fill, so the line never shows through the glyph on light or dark backgrounds.
What you can change
- the glyph in the disc through glyph
- the tone through tone: neutral or accent
- the boundary name through label
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/separator-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, no hooks. A three-column grid (1fr auto 1fr) keeps the disc exactly centred at any width. The disc carries its own fill and border: without the fill the line runs through the glyph, and cutting it out with a mask would have to be done separately for every background. The glyph is decorative and marked aria-hidden — "✦" announces nothing aloud; the meaning of the boundary is carried by role=separator with aria-label. The tone is switched by the data-tone attribute and changes three variables at once. The disc fill is declared through light-dark(): in a dark environment it darkens together with the background, so the component needs no surface of its own.
Tags
- separator
- icon
- divider
- ornament
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…