Skip to content
Nim UI

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

Fixed Size Spacer

View 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.

Size Variants

View 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.

Flex Spacer

View 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.

Multiple Flex Spacers

View 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>
  );
}
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