# @commercetools-uikit/spacings-inline

> An inline spacing component renders its children horizontally with a consistent spacing between them.

Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @commercetools-uikit/spacings-inline
pnpm add @commercetools-uikit/spacings-inline
yarn add @commercetools-uikit/spacings-inline
bun add @commercetools-uikit/spacings-inline
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 20.6.7 |
| Published | 2026-07-17 |
| First published | 2019-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 25.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 154 |
| Maintainers | emmenko, commercetools-admin, tdeekens |
| Keywords | javascript, typescript, design-system, react, uikit |

## Links

- npm: https://www.npmjs.com/package/@commercetools-uikit/spacings-inline
- Repository: https://github.com/commercetools/ui-kit
- Homepage: https://uikit.commercetools.com
- Issues: https://github.com/commercetools/ui-kit/issues
- npm.io page: https://npm.io/package/@commercetools-uikit/spacings-inline

## Dependencies (5)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13
- [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7
- [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 20.6.7 (latest) — 2026-07-17
- 0.0.0-canary-20260831181816 (canary) — 2026-08-31
- 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18
- 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13
- 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19
- 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28
- 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27
- 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09
- 0.0.0-main-20250115172531 (main) — 2025-01-15
- 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13
- 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12
- 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11
- 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10
- 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04
- 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24
- … 968 more at https://npm.io/package/@commercetools-uikit/spacings-inline/versions

## README

# Inline

## Description

If you want to learn more about the spacing components take a look at
[this](https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62)
article.

## Usage

```jsx
import SpacingsInline from '@commercetools-uikit/spacings-inline';

<SpacingsInline scale="m">
  <FlatButton />
  <FlatButton />
  <FlatButton />
</SpacingsInline>;
```

### Using Spacings preset

Inline spacing can be imported and used via `spacings` preset as well.

```jsx
import Spacings from '@commercetools-uikit/spacings';

<Spacings.Inline scale="m">
  <FlatButton />
  <FlatButton />
  <FlatButton />
</Spacings.Inline>;
```

## Properties

| Props            | Type             | Required | Values                                                                                  | Default      |
| ---------------- | ---------------- | :------: | --------------------------------------------------------------------------------------- | ------------ |
| `scale`          | `String`         |    -     | `['xs', 's', 'm', 'l', 'xl']`                                                           | `s`          |
| `alignItems`     | `oneOf`          |    -     | `['stretch', 'flex-start', 'flex-end', 'center', 'baseline']`                           | `flex-start` |
| `justifyContent` | `oneOf`          |    -     | `['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']` | `flex-start` |
| `children`       | `PropTypes.node` |    -     | -                                                                                       | -            |

If you need to use `flex-wrap` CSS property, consider using instead the component [`<Grid />`](https://uikit.commercetools.com/?path=/story/components-grid--grid).

## Scales

| Scale | Pixel |
| :---- | :---- |
| xs    | `4`   |
| s     | `8`   |
| m     | `16`  |
| l     | `24`  |
| xl    | `32`  |

---
_Source: https://npm.io/package/@commercetools-uikit/spacings-inline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._