Center

Centra hijos en uno o ambos ejes sin volver a escribir las clases de flex.

No deploys yet

Push to main to trigger the first one.

1import { InboxIcon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Button } from '@/components/ui/button';
4import { Center } from '@/components/ui/center';
5
6export function Default() {
7  return (
8    <Center
9      text
10      className="border-border bg-card h-56 w-full max-w-md flex-col gap-3 rounded-xl border"
11    >
12      <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full">
13        <HugeiconsIcon icon={InboxIcon} size={20} />
14      </span>
15      <div>
16        <p className="text-sm font-medium">No deploys yet</p>
17        <p className="text-muted-foreground text-xs">Push to main to trigger the first one.</p>
18      </div>
19      <Button size="sm" variant="outline">
20        View setup guide
21      </Button>
22    </Center>
23  );
24}

Instalación

pnpm dlx nachui add center

Anatomía

1import { Center } from '@/components/ui/center';

1<Center className="h-64">
2  <p>Todavía no hay nada</p>
3</Center>

Center es un contenedor flex con items-center y justify-center. Dale una altura, o deja que llene un padre que la tenga, y lo que esté adentro queda en el medio. Agrega flex-col y gap-* con className cuando haya varios hijos.

Ejemplos

Predeterminado (Default)

Un estado vacío centrado en una tarjeta. text también centra el texto.

No deploys yet

Push to main to trigger the first one.

1import { InboxIcon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Button } from '@/components/ui/button';
4import { Center } from '@/components/ui/center';
5
6export function Default() {
7  return (
8    <Center
9      text
10      className="border-border bg-card h-56 w-full max-w-md flex-col gap-3 rounded-xl border"
11    >
12      <span className="bg-muted text-muted-foreground flex size-10 items-center justify-center rounded-full">
13        <HugeiconsIcon icon={InboxIcon} size={20} />
14      </span>
15      <div>
16        <p className="text-sm font-medium">No deploys yet</p>
17        <p className="text-muted-foreground text-xs">Push to main to trigger the first one.</p>
18      </div>
19      <Button size="sm" variant="outline">
20        View setup guide
21      </Button>
22    </Center>
23  );
24}

Eje

axis limita el centrado a una dirección.

both

axis="both"

horizontal

axis="horizontal"

vertical

axis="vertical"

1import { Center } from '@/components/ui/center';
2
3const chip = 'bg-primary text-primary-foreground rounded-md px-3 py-1.5 text-xs font-medium';
4const frame = 'border-border bg-hatch h-24 w-full rounded-lg border';
5
6export function Axis() {
7  return (
8    <div className="grid w-full max-w-md grid-cols-1 gap-4 sm:grid-cols-3">
9      <div className="flex flex-col gap-1.5">
10        <Center className={frame}>
11          <span className={chip}>both</span>
12        </Center>
13        <span className="text-muted-foreground text-center text-xs">axis="both"</span>
14      </div>
15      <div className="flex flex-col gap-1.5">
16        <Center axis="horizontal" className={frame}>
17          <span className={chip}>horizontal</span>
18        </Center>
19        <span className="text-muted-foreground text-center text-xs">axis="horizontal"</span>
20      </div>
21      <div className="flex flex-col gap-1.5">
22        <Center axis="vertical" className={frame}>
23          <span className={chip}>vertical</span>
24        </Center>
25        <span className="text-muted-foreground text-center text-xs">axis="vertical"</span>
26      </div>
27    </div>
28  );
29}

Referencia de API

Center

Prop	Tipo	Por defecto	Descripción
`axis`	`'both' \| 'horizontal' \| 'vertical'`	`'both'`	En qué ejes centrar
`inline`	`boolean`	`false`	Usa `inline-flex` en lugar de `flex`
`text`	`boolean`	`false`	Aplica también `text-center`
`as`	`React.ElementType`	`'div'`	Elemento a renderizar
`className`	`string`	-	Clases CSS adicionales

¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue

AnteriorAspect Ratio

SiguienteSpacer