# @chakra-ui/styled-system

> Style function for css-in-js building component libraries

Latest version **2.12.0** (published 2024-10-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chakra-ui/styled-system
pnpm add @chakra-ui/styled-system
yarn add @chakra-ui/styled-system
bun add @chakra-ui/styled-system
```

## Health

**Score 45/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.12.0 |
| Published | 2024-10-16 |
| First published | 2020-07-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 246.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40708 |
| Author | Segun Adebayo |
| Maintainers | segunadebayo, _codebender828 |
| Keywords | theme, theming, style, system, styled, css-in-js, component, functions, parser, chakra ui |

## Links

- npm: https://www.npmjs.com/package/@chakra-ui/styled-system
- Repository: https://github.com/chakra-ui/chakra-ui
- Homepage: https://github.com/chakra-ui/chakra-ui#readme
- Issues: https://github.com/chakra-ui/chakra-ui/issues
- npm.io page: https://npm.io/package/@chakra-ui/styled-system

## Dependencies (2)

- [csstype](https://npm.io/package/csstype.md) ^3.1.2
- [@chakra-ui/utils](https://npm.io/package/@chakra-ui/utils.md) 2.2.2

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.12.0 (latest) — 2024-10-16
- 2.12.5 (v2-latest) — 2026-06-04
- 0.0.0-dev-20240315145938 (dev) — 2024-03-15
- 0.0.0-v3-20240109123510 (next) — 2024-01-09
- 0.0.0-pr-202212011232 (pr) — 2022-02-20
- 0.0.0-canary-2021118164051 (canary) — 2021-12-08
- 2.12.4 — 2025-05-21
- 2.12.3 — 2025-05-14
- 2.12.2 — 2025-02-19
- 2.12.1 — 2024-11-07
- 0.0.0-v2-latest-20241107153126 — 2024-11-07
- 2.11.2 — 2024-10-09
- 2.11.1 — 2024-10-04
- 2.11.0 — 2024-10-04
- 2.10.3 — 2024-10-03
- … 480 more at https://npm.io/package/@chakra-ui/styled-system/versions

## README

# @chakra-ui/styled-system

The framework's agnostic styling engine for Chakra UI. It's used in the `system`
package.

## Installation

```sh
npm i @chakra-ui/styled-system

# or

yarn add @chakra-ui/styled-system
```

### CSS Logical Properties

Chakra UI provides pretty good support for bidirectional (`bidi`) CSS
properties. For our shorthand props, we provide a `*Bidi` suffix to manage the
rtl/ltr switching.

```jsx
import { css } from "@chakra-ui/styled-system"

const theme = {
  direction: "rtl", // ltr | rtl
}

const styles = css({
  mt: "40px",
  // bi-directional `margin-right`
  // `margin-right` in ltr, `margin-left` in rtl
  mrBidi: "30px",
})(theme)
```

### References

```js
const cssLogicalValueMap = {
  float: { left: "inline-start", right: "inline-end" },
  clear: { left: "inline-start", right: "inline-end" },
  resize: { horizontal: "block", vertical: "inline" },
  textAlign: { left: "start", right: "end" },
  captionSize: { top: "block-start", bottom: "block-end" },
}

const cssLogicalPropertiesMap = {
  // Margin and Padding Logical Properties
  "marginTop|mt": "marginBlockStart",
  "marginLeft|ml": "marginInlineStart",
  "marginRight|mr": "marginInlineEnd",
  "marginBottom|mb": "marginBlockEnd",
  "paddingTop|pt": "paddingBlockStart",
  "paddingBottom|pb": "paddingBlockEnd",
  "paddingLeft|pl": "paddingInlineStart",
  "paddingRight|pr": "paddingInlineEnd",
  "marginY|my": "marginBlock",
  "marginX|mx": "marginInline",
  "paddingY|py": "paddingBlock",
  "paddingX|px": "paddingInline",

  // Floating and positioning logical properties
  top: "insetBlockStart",
  bottom: "insetBlockEnd",
  left: "insetInlineStart",
  right: "insetInlineEnd",

  // Sizing Logical properties
  "width|w": "inlineSize",
  "minW|minWidth": "minInlineSize",
  "maxW|maxWidth": "maxInlineSize",
  "height|h": "blockSize",
  "minH|minHeight": "minBlockSize",
  "maxH|maxHeight": "maxBlockSize",

  // Border logical properties
  borderY: "borderBlock",
  borderX: "borderInline",

  borderTop: "borderBlockStart",
  borderTopWidth: "borderBlockStartWidth",
  borderTopStyle: "borderBlockStartStyle",
  borderTopColor: "borderBlockStartColor",

  borderBottom: "borderBlockEnd",
  borderBottomWidth: "borderBlockEndWidth",
  borderBottomStyle: "borderBlockEndStyle",
  borderBottomColor: "borderBlockEndColor",

  borderLeft: "borderInlineStart",
  borderLeftWidth: "borderInlineStartWidth",
  borderLeftStyle: "borderInlineStartStyle",
  borderLeftColor: "borderInlineStartColor",

  borderRight: "borderInlineEnd",
  borderRightWidth: "borderInlineEndWidth",
  borderRightStyle: "borderInlineEndStyle",
  borderRightColor: "borderInlineEndColor",
}
```

---
_Source: https://npm.io/package/@chakra-ui/styled-system · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._