Components

Component

Box

Token-aware base layout primitive.

ReactReact Native7 props
PreviewReact

Token surface

Box maps spacing, color, border, radius, and shadow tokens to platform styles.

Imports

import { HStack, VStack } from "@hozorica/hods-react";
import { HStack, VStack } from "@hozorica/hods-react-native";

Props

PropTypeDescription
bg / backgroundColorTokenSemantic background color token.
colorColorTokenForeground color token on web.
p / px / py / pt / pr / pb / plDimensionToken | 0Token spacing props.
m / mx / my / mt / mr / mb / mlDimensionToken | 0Token margin props.
width / minWidth / maxWidthDimensionToken | numberSizing tokens. RN also accepts numbers.
borderRadiusRadiusToken | 0Corner radius token.
as / asChildElementType / booleanWeb-only polymorphism.

Platform Support

React

Full token layout primitive with as/asChild support.

React Native

Token layout primitive using View; no as/asChild.

Usage

<Box bg="bg.neutralWeak" borderRadius="r2" px="x4" py="x3" />

Notes

  • Use Box for layout only; use Text for typography.
  • React Native resolves token names to numeric values where required.