Box

Box is the lowest-level building block in MindeesUI. It wraps a React Native View and exposes token-aware padding, margin, sizing, and surface props. Reach for it when you need a styled container without the flex behaviour of Stack.

Import

import { Box } from '@mindees/ui';

Usage

<Box padding="md" background="surface" radius="md" shadow="sm">
  <Text>Card content</Text>
</Box>

Props

Prop	Type	Default	Description
padding	SpaceToken | number	—	Padding on all sides. Token name or raw dp.
paddingX	SpaceToken | number	—	Horizontal padding shorthand.
paddingY	SpaceToken | number	—	Vertical padding shorthand.
paddingTop	SpaceToken | number	—	Top padding.
paddingRight	SpaceToken | number	—	Right padding.
paddingBottom	SpaceToken | number	—	Bottom padding.
paddingLeft	SpaceToken | number	—	Left padding.
margin	SpaceToken | number	—	Margin on all sides.
marginX	SpaceToken | number	—	Horizontal margin shorthand.
marginY	SpaceToken | number	—	Vertical margin shorthand.
marginTop	SpaceToken | number	—	Top margin.
marginRight	SpaceToken | number	—	Right margin.
marginBottom	SpaceToken | number	—	Bottom margin.
marginLeft	SpaceToken | number	—	Left margin.
background	'canvas' | 'surface' | 'subtle' | 'elevated'	—	Semantic theme background key.
borderColor	'subtle' | 'default' | 'strong'	—	Semantic border colour. Triggers a 1-dp border.
borderWidth	number	1	Border width when borderColor is set.
radius	RadiusToken	—	Border radius token.
shadow	ShadowToken	—	Elevation/shadow token.
width	'fill' | 'hug' | number | string	—	Figma-style sizing on the width axis.
height	'fill' | 'hug' | number | string	—	Figma-style sizing on the height axis.
minWidth	number | string	—	Minimum width.
minHeight	number | string	—	Minimum height.
maxWidth	number | string	—	Maximum width.
maxHeight	number | string	—	Maximum height.
asChild	boolean	false	Merge props onto the immediate child instead of rendering a View.

Any remaining ViewProps are forwarded to the underlying View.

Accessibility

Inherits accessibility from the underlying RN View — pass accessibilityLabel, accessibilityRole, etc. via props.