Spacer

Flexible or fixed space between siblings. Pushes items apart in a Flex, or adds a gap in a Stack.

NorthwindIF

1'use client';
2
3import { Notification03Icon, Search01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Avatar } from '@/components/ui/avatar';
6import { Button } from '@/components/ui/button';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <HugeiconsIcon icon={Search01Icon} size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <HugeiconsIcon icon={Notification03Icon} size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Installation

pnpm dlx nachui add spacer

Anatomy

1import { Spacer } from '@/components/ui/spacer';

1<Flex align="center">
2  <Logo />
3  <Spacer />
4  <Button>Sign in</Button>
5</Flex>

Without size the spacer is flex-1 and takes whatever room is left, so it pushes the siblings after it to the far edge. With size it becomes a fixed block on the given axis, which reads better than a stray mt-6 in long layouts. It is hidden from assistive tech either way.

Examples

Flexible

A toolbar where the actions sit at the end.

NorthwindIF

1'use client';
2
3import { Notification03Icon, Search01Icon } from '@hugeicons/core-free-icons';
4import { HugeiconsIcon } from '@hugeicons/react';
5import { Avatar } from '@/components/ui/avatar';
6import { Button } from '@/components/ui/button';
7import { Flex } from '@/components/ui/flex';
8import { Spacer } from '@/components/ui/spacer';
9
10export function Default() {
11  return (
12    <Flex
13      align="center"
14      gap="2"
15      className="border-border bg-card w-full max-w-md rounded-xl border px-3 py-2"
16    >
17      <span className="px-2 text-sm font-semibold">Northwind</span>
18      <Spacer />
19      <Button variant="ghost" size="icon" aria-label="Search">
20        <HugeiconsIcon icon={Search01Icon} size={16} />
21      </Button>
22      <Button variant="ghost" size="icon" aria-label="Notifications">
23        <HugeiconsIcon icon={Notification03Icon} size={16} />
24      </Button>
25      <Avatar size="sm">
26        <Avatar.Fallback>IF</Avatar.Fallback>
27      </Avatar>
28    </Flex>
29  );
30}

Fixed

Named gaps in a stacked layout, vertical and horizontal.

Delete workspace

Every project, deploy and member is removed. This cannot be undone.

1import { Button } from '@/components/ui/button';
2import { Spacer } from '@/components/ui/spacer';
3
4export function Fixed() {
5  return (
6    <div className="border-border bg-card w-full max-w-sm rounded-xl border p-6">
7      <p className="text-base font-semibold">Delete workspace</p>
8      <Spacer size="2" />
9      <p className="text-muted-foreground text-sm">
10        Every project, deploy and member is removed. This cannot be undone.
11      </p>
12      <Spacer size="6" />
13      <div className="flex">
14        <Button variant="outline" size="sm">
15          Keep it
16        </Button>
17        <Spacer axis="horizontal" size="3" />
18        <Button variant="destructive" size="sm">
19          Delete
20        </Button>
21      </div>
22    </div>
23  );
24}

API Reference

Spacer

Prop	Type	Default	Description
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '8' \| '10' \| '12' \| '16' \| '20' \| '24' \| '32'`	-	Fixed size on the spacing scale. Omit to flex
`axis`	`'vertical' \| 'horizontal'`	`'vertical'`	Direction of a fixed spacer
`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

PreviousCenter

NextSplit