
<View direction="row" gap={0}>
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-radius-small)",
      width: 60,
      height: 60,
    }}
  />
  <div
    style={{
      borderBottom: "1px solid var(--rs-color-border-critical)",
      width: "var(--rs-unit-x10)",
      textAlign: "center",
      position: "relative",
      top: "var(--rs-unit-x3)",
    }}
  >
    <div
      style={{
        width: 1,
        height: "var(--rs-unit-x4)",
        background: "var(--rs-color-border-critical)",
        position: "absolute",
        left: 0,
        bottom: "calc(var(--rs-unit-x2) * -1)",
      }}
    />
    x10
    <div
      style={{
        width: 1,
        height: "var(--rs-unit-x4)",
        background: "var(--rs-color-border-critical)",
        position: "absolute",
        right: 0,
        bottom: "calc(var(--rs-unit-x2) * -1)",
      }}
    />
  </div>
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-radius-small)",
      width: 60,
      height: 60,
    }}
  />
</View>

The Reshaped unit system is based on a single base value defined in the theme, which is 4px in the default theme. We generate multipliers from 1 to 10 for direct use in the product.

--rs-unit-x1
...
--rs-unit-x10

/* Usage */
.element {
  margin-top: var(--rs-unit-x4);
}

Sometimes these multiplier variables are not enough. In such cases, you can multiply the value yourself in CSS.

.element {
  height: calc(var(--rs-unit-x1) * 40);
}

Typography

Radius