/ux
Components/Layout/Space

Space

Layout

Empty spacer block; height/width set via Tailwind.

Renders an aria-hidden <span> with fixed dimensions. Use to add explicit gaps between elements that aren't in a flex/grid container. Prefer gap on Stack/Group for most spacing needs.

Usage

import { Space } from "nosible-ux"

export default function Example() {
  return (
    <>
      <div>Signal A</div>
      <Space h="md" />
      <div>Signal B</div>
    </>
  )
}

Examples

Token sizes

Section ASection B

Props

Name TypeDefaultDescription
h
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Fixed pixel height (vertical spacer). Takes precedence over size.
size
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Shorthand that sets both width and height to the same token or pixel value. Use w/h for asymmetric spacers. Default: none (renders a zero-size element).
w
number | "xs" | "sm" | "md" | "lg" | "xl" | undefined—Fixed pixel width (horizontal spacer). Takes precedence over size.
← All ComponentsGetting Started →