Center

Center children on one or both axes without writing the flex classes again.

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}

Installation

pnpm dlx nachui add center

Anatomy

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

1<Center className="h-64">
2  <p>Nothing here yet</p>
3</Center>

Center is a flex container with items-center and justify-center. Give it a height, or let it fill a parent that has one, and whatever is inside sits in the middle. Add flex-col and gap-* through className when there are several children.

Examples

Default

An empty state centered in a card. text also centers the text inside.

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}

Axis

axis limits centering to one direction.

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}

API Reference

Center

Prop	Type	Default	Description
`axis`	`'both' \| 'horizontal' \| 'vertical'`	`'both'`	Which axes to center on
`inline`	`boolean`	`false`	Use `inline-flex` instead of `flex`
`text`	`boolean`	`false`	Also apply `text-center`
`as`	`React.ElementType`	`'div'`	Element to render
`className`	`string`	-	Additional CSS classes

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousAspect Ratio

NextSpacer