Center

A flex centering primitive. It applies flex items-center justify-center, so whatever you nest inside lands dead-center horizontally and vertically. Useful for placeholder states, spinners, empty slots, and any sized box that needs its content centered.

Where Stack lays children out in a row or column with a gap, Center does one job: align a single block (or a small group) to the middle of its box. Give the Center a height — via className, an explicit size, or a flex/grid parent — so there is space to center within.

Basic

Drop content inside a sized box and it centers on both axes. The box below has a fixed height and a border so the centering is visible.

import { Center } from "@vesyl/ui-next";

export default function CenterBasic() {
  return (
    <Center className="h-48 rounded-lg border bg-muted/30">
      <div className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
        Centered both ways
      </div>
    </Center>
  );
}

As another element

Center renders a div by default. Pass as to render a different element — e.g. a semantic section — while keeping the centering behavior and forwarding the ref.

import { Center } from "@vesyl/ui-next";

export default function CenterAs() {
  return (
    <Center
      as="section"
      className="h-48 rounded-lg border bg-muted/30 text-sm text-muted-foreground"
    >
      Rendered as a &lt;section&gt;
    </Center>
  );
}

Reference

Center

Extends the standard div HTML attributes — spread className, style, event handlers, etc.