# @bedrock-layout/spacing-constants

> bedrock-layout spacing constants

Latest version **4.0.1** (published 2026-02-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bedrock-layout/spacing-constants
pnpm add @bedrock-layout/spacing-constants
yarn add @bedrock-layout/spacing-constants
bun add @bedrock-layout/spacing-constants
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.0.1 |
| Published | 2026-02-04 |
| First published | 2020-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 449 |
| Author | Jarvis1010 <travis.mair@gmail.com> |
| Maintainers | jarvis1010 |
| Keywords | spacing, constants |

## Links

- npm: https://www.npmjs.com/package/@bedrock-layout/spacing-constants
- Repository: https://github.com/Bedrock-Layouts/Bedrock
- Homepage: https://bedrock-layout.dev/
- Issues: https://github.com/Bedrock-Layouts/Bedrock/issues
- npm.io page: https://npm.io/package/@bedrock-layout/spacing-constants

## Recent versions

- 4.0.1 (latest) — 2026-02-04
- 4.0.0 — 2026-02-03
- 3.3.10 — 2025-02-07
- 3.3.9 — 2024-08-20
- 3.3.8 — 2024-06-03
- 3.3.7 — 2024-02-14
- 3.3.6 — 2024-02-14
- 3.3.5 — 2024-02-14
- 3.3.4 — 2024-01-18
- 3.3.3 — 2024-01-12
- 3.3.2 — 2023-10-15
- 3.3.1 — 2023-10-04
- 3.3.0 — 2023-10-03
- 3.2.5 — 2023-07-13
- 3.2.4 — 2023-03-03
- … 56 more at https://npm.io/package/@bedrock-layout/spacing-constants/versions

## README

# `@bedrock-layout/spacing-constants`

Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)

Spacing constants are the standard by which all spacing and layout decisions are made in the Bedrock Layout Primitives. They are the building blocks of the system and are used to create all other spacing values.

Bedrock Layout's spacing constants are based on the [Open-props size scale](https://open-props.style/#sizes).

## Spacing constants

```js
{
  space:{
    size000: "-.5rem",
    size00: "-.25rem",
    size1: ".25rem",
    size2: ".5rem",
    size3: "1rem",
    size4: "1.25rem",
    size5: "1.5rem",
    size6: "1.75rem",
    size7: "2rem",
    size8: "3rem",
    size9: "4rem",
    size10: "5rem",
    size11: "7.5rem",
    size12: "10rem",
    size13: "15rem",
    size14: "20rem",
    size15: "30rem",
  },
  sizes: {
    sizeContent1: "20ch",
    sizeContent2: "45ch",
    sizeContent3: "60ch",
    sizeHeader1: "20ch",
    sizeHeader2: "25ch",
    sizeHeader3: "35ch",
    sizeXxs: "240px",
    sizeXs: "360px",
    sizeSm: "480px",
    sizeMd: "768px",
    sizeLg: "1024px",
    sizeXl: "1440px",
    sizeXxl: "1920px",
  }
}
```

## Using CSS Custom Properties

The spacing constants (e.g., `size3`) can be used as string values directly in the `gap` and `padding` props. Alternatively, you can use CSS custom properties by wrapping them in `var()`. The library provides CSS custom properties for each spacing value, with names transformed from camelCase to kebab-case (e.g., `size3` → `--size-3`).

You can use CSS custom properties with the `gap` prop like this:

```typescript
  <Stack gap="var(--size-3)">
    {...}
  </Stack>
```

Or with the `padding` prop:

```typescript
  <Stack padding="var(--size-3)">
    {...}
  </Stack>
```

## No spacing in your design system

In a perfect world we would only work on applications that have a well defined spacing system. However, there are many applications that do not have a well defined spacing system. For these applications, you can use any positive integer or valid `CSSLength` value for the spacing values.

---
_Source: https://npm.io/package/@bedrock-layout/spacing-constants · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._