VibeUI

Display

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.

  • separator
  • icon
  • divider
  • ornament

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/separator-005?lang=en

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "separator-005" (Icon Center Divider) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/separator-005.json

Registry item: https://vibeui.ru/r/separator-005.json
Installs to: components/vibeui/separator-005.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
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.

A divider with a glyph disc: three grid columns and a disc with its own fill. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Separator005 } from "@/components/vibeui/separator-005"

<Separator005 glyph="✦" tone="accent" label="End of section" />

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-separator-005-* palette — do not swap it for your theme tokens
- the disc's own fill: without it the line shows through the glyph
- the 1fr auto 1fr grid — margins cannot keep the disc centred as the width changes
- aria-hidden on the glyph: "✦" says nothing aloud and only clutters the reading
- role=separator with aria-label: a boundary must be named, not merely drawn
- the light disc fill with a dark glyph: it stays readable on any catalog background

## 6. You may change
- the glyph in the disc through glyph
- the tone through tone: neutral or accent
- the boundary name through label
- the divider width through max-width

## 7. Rules
- The glyph is a character, not an svg: drop your own element into the disc for an icon set.
- The disc has a fixed size: a very large glyph has to be scaled down by font size.
- The accent tone also changes the line colour — deliberately, otherwise the disc looks like a sticker.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/separator-005.json
https://vibeui.ru/r/separator-005.json

Серверный компонент, хуков нет. Сетка из трёх колонок (1fr auto 1fr) держит кружок ровно по центру при любой ширине. Кружок несёт собственную заливку и рамку: без заливки линия проходит сквозь знак, а вырезать её маской пришлось бы под каждый фон отдельно. Знак декоративен и помечен aria-hidden — «✦» вслух ничего не сообщает; смысл границы несёт role=separator с aria-label. Тон переключается атрибутом data-tone и меняет три переменные разом. Кружок светлый с тёмным знаком, поэтому отдельная подложка компоненту не нужна.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Separator005Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  glyph?: string
  tone?: "neutral" | "accent"
  label?: string
}

// Идея компонента: разделитель со знаком в центре. Знак сидит в кружке со
// своей заливкой, поэтому линия не просвечивает сквозь него ни на светлом,
// ни на тёмном фоне. Знак декоративен и скрыт от скринридера: смысл границы
// несёт role="separator" с подписью, а «✦» вслух ничего не сообщает.
const STYLES = `
:where([data-vibeui-block="separator-005"]){
--vibeui-separator-005-line:oklch(0.87 0.006 265);
--vibeui-separator-005-disc:oklch(1 0 0);
--vibeui-separator-005-fg:oklch(0.45 0.014 265);
--vibeui-separator-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="separator-005"]{
display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0.75rem;
width:100%;max-width:22rem;box-sizing:border-box;
font-family:var(--vibeui-separator-005-font);
}
[data-vibeui-block="separator-005"] [data-part="line"]{
height:1px;background:var(--vibeui-separator-005-line);
}
/* Кружок со своей заливкой: линия не просвечивает сквозь знак. */
[data-vibeui-block="separator-005"] [data-part="disc"]{
display:grid;place-items:center;
width:1.75rem;height:1.75rem;box-sizing:border-box;
border-radius:9999px;
background:var(--vibeui-separator-005-disc);
border:1px solid var(--vibeui-separator-005-line);
color:var(--vibeui-separator-005-fg);
font-size:0.75rem;line-height:1;
}
[data-vibeui-block="separator-005"][data-tone="accent"]{
--vibeui-separator-005-disc:oklch(0.94 0.05 262);
--vibeui-separator-005-line:oklch(0.85 0.05 262);
--vibeui-separator-005-fg:oklch(0.45 0.16 262);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="separator-005"] *{animation:none!important;transition:none!important}}
`

/**
 * Разделитель со знаком в кружке посередине линии.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Separator005({
  glyph = "✦",
  tone = "neutral",
  label = "Конец раздела",
  className,
  style,
  ...props
}: Separator005Props) {
  return (
    <>
      <style href="vibeui-separator-005" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="separator-005"
        data-tone={tone}
        role="separator"
        aria-label={label}
        className={className}
        style={style as CSSProperties}
      >
        <span data-part="line" />
        <span data-part="disc" aria-hidden="true">
          {glyph}
        </span>
        <span data-part="line" />
      </div>
    </>
  )
}