
<View direction="row" align="center" justify="center" gap={6}>
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-radius-small)",
      width: 60,
      height: 60,
    }}
  />
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-radius-medium)",
      width: 80,
      height: 80,
    }}
  />
  <div
    style={{
      background: "var(--rs-color-background-neutral)",
      borderRadius: "var(--rs-radius-large)",
      width: 120,
      height: 120,
    }}
  />
</View>

Reshaped supports three radius tokens based on the size of the components they are applied to.

Small radius is used for small atomic elements like Badge.
Medium radius is used for more prominent elements such as Card or large Button.
Large radius is used for bigger elements like Modal or decorative blocks that need to stand out.

--rs-radius-small
--rs-radius-medium
--rs-radius-large

/* Usage */
.element {
  border-radius: var(--rs-radius-medium);
}

Unit

Shadow