GitHub

Box

If you need a flexible component to assist with low-level design needs, Box is an ideal choice. This low-level component is just what you need for a wide range of tasks. With its customizable styles and properties, Box can be used to create everything from simple containers to more complex design structures.

Usage

This example demonstrates how to use Box with the default configuration.

  • Create layouts with ease.
  • Use it as a container for other components.
  • Provide a shorthand way to pass styles via props, example: (bgColor instead of backgroundColor).
tsx
<Box bgColor="blue" border="xl" p="xs">
  <Text>This is the Box</Text>
</Box>

Import

To use this component in your project, include the following import statement in your file.

tsx
import { Box } from "@design-blocks/primitives";

Props

Rest assured that Box inherits all the properties of the React Native View component.

styles props

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

tsx
<Box w="lg" h="lg" bgColor="blue" border="xl" m="lg" p="xs" borderRadius="md">
  <Text>This is the Box</Text>
</Box>

To find out which properties are theme-aware, see the Style Props.

sx

The system prop that allows defining system overrides as well as additional CSS styles.

tsx
<Box bgColor="blue" border="xl" p="xs" sx={{ bgColor: "red" }}>
  <Text>This is the Box</Text>
</Box>

In this case, sx will overwrite the bgColor passed as a prop, resulting in a Box with a red backgroundColor.

See the sx page for more details.

Unstyled

It's important to note that primitive components come without predefined styles. For more information, please refer to this link.

OverviewText