Spacing Scale

Visual spacing scale displaying token names, proportional bars, and pixel/rem values.

Preview

4px / 0.25rem

8px / 0.5rem

12px / 0.75rem

16px / 1rem

24px / 1.5rem

32px / 2rem

48px / 3rem

64px / 4rem

Installation

npx visor add spacing-scale

This copies two files into your project:

components/ui/spacing-scale/spacing-scale.tsx — the component
components/ui/spacing-scale/spacing-scale.module.css — the styles

Usage

import { SpacingScale } from '@/components/ui/spacing-scale/spacing-scale';

<SpacingScale steps={[
  { token: "--spacing-1", name: "1", px: 4, rem: "0.25rem" },
  { token: "--spacing-2", name: "2", px: 8, rem: "0.5rem" },
  { token: "--spacing-4", name: "4", px: 16, rem: "1rem" },
  { token: "--spacing-8", name: "8", px: 32, rem: "2rem" },
  { token: "--spacing-16", name: "16", px: 64, rem: "4rem" },
]} />

API Reference

SpacingScaleProps

Prop	Type	Default	Description
`steps`*	`SpacingScaleItemProps[]`	—	Array of spacing steps with token, name, px, and rem values.
`className`	`string`	—	Additional CSS class names to merge onto the element.

Accessibility

SpacingScale is a documentation utility. Proportional bars are supplemented by text labels (name), pixel values, and rem values so the scale is fully readable without relying on visual bar width.