Spacer

The Spacer component creates visual separation between elements using either fixed sizes or flexible (flex: 1) spacing. It is particularly useful inside Flex or Stack containers to push items apart without relying on margin or justify-content. The component includes aria-hidden="true" by default since it is a purely decorative element.

Import

import { Spacer } from '@nim-ui/components';

Basic Usage

Content above

Content below (lg spacer)

Code

<Stack direction="vertical" spacing="none">
  <div>Content above</div>
  <Spacer size="lg" />
  <div>Content below</div>
</Stack>

Fixed Sizes

The size prop sets a fixed width and height for the spacer.

2xl

Code

<Spacer size="xs" />   {/* 0.25rem (4px) */}
<Spacer size="sm" />   {/* 0.5rem (8px) */}
<Spacer size="md" />   {/* 1rem (16px) */}
<Spacer size="lg" />   {/* 1.5rem (24px) */}
<Spacer size="xl" />   {/* 2rem (32px) */}
<Spacer size="2xl" />  {/* 3rem (48px) */}

Flexible Spacer

The flex prop applies flex: 1 to the spacer, causing it to expand and fill all available space. This is useful for pushing items to opposite ends of a flex container.

Left

Right

Code

<Flex>
  <div>Left</div>
  <Spacer flex />
  <div>Right</div>
</Flex>

Multiple Flex Spacers

When multiple flex spacers are used, they share the available space equally.

Left

Center

Right

Code

<Flex>
  <div>Left</div>
  <Spacer flex />
  <div>Center</div>
  <Spacer flex />
  <div>Right</div>
</Flex>

Props

Name	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	-	Fixed spacer size (sets both width and height)
`flex`	`boolean`	`false`	Use flex: 1 to fill available space in a flex container
`className`	`string`	-	Additional CSS classes to apply

Usage Examples

Header with Spacer

function Header() {
  return (
    <Flex align="center">
      <img src="/logo.svg" alt="Logo" />
      <Spacer flex />
      <nav>
        <Flex gap="md">
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
        </Flex>
      </nav>
      <Spacer size="md" />
      <Button variant="primary">Sign In</Button>
    </Flex>
  );
}

Section Separator

function PageContent() {
  return (
    <Stack spacing="none">
      <section>First section content</section>
      <Spacer size="2xl" />
      <section>Second section content</section>
      <Spacer size="xl" />
      <section>Third section content</section>
    </Stack>
  );
}

Card Footer Actions

function CardWithActions() {
  return (
    <Card>
      <CardContent>Card content here</CardContent>
      <CardFooter>
        <Button variant="ghost">Cancel</Button>
        <Spacer flex />
        <Button variant="primary">Save</Button>
      </CardFooter>
    </Card>
  );
}

Accessibility

The Spacer component is a purely decorative element and includes aria-hidden="true" by default, ensuring it is invisible to screen readers and assistive technologies. No additional accessibility considerations are needed.

Flex - Flexbox layout container, often used with Spacer
Stack - Stacking with built-in spacing
Container - Responsive max-width wrapper

On this page