Version: 3.0.0-next.37

Box

This is a generic component for low level layout needs. It is similar to a div in HTML.

Example#

Basic#

Composition#

Basic (With Ref)#



Common use cases for Box component are:
  • Create responsive layouts with ease.
  • Provide a shorthand to pass styles via props (bg instead of backgroundColor).

Props#

Name Type Description Default
children any Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. -
shadow number Applies box shadow and accepts a number from 0 to 9 0
_text ITextProps For providing props to Text inside Box -

Box implements View, ColorProps, BackgroundProps, LayoutProps, FlexProps, TypographyProps, PositionProps, BorderProps, ExtraProps, OutlineProps, SafeAreaProps, TransformProps, PlatformProps