---
title: Box | UI
description: This is a generic component for low level layout needs. It is similar to a div in HTML.
pageTitle: Box
pageDescription: This is a generic component for low level layout needs. It is similar to a div in HTML.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';
import { useRef, useEffect, useState } from 'react';

<Meta title="components/Layout/Box" />

import { Box } from './Box';
import { transformedCode } from '../../../utils';
import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

import { styled } from '@dank-style/react';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Box` component to your project.

```jsx
npx install @gluestack-ui add box
```

## Import

```jsx
// import the component from your component folder
import { Box } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
<Box
  h="$20"
  w="$20"
  bg="$primary500"
  p="$20"
  justifyContent="center"
  alignItems="center"
>
  <Text color="white" fontWeight="bold">
    BOX
  </Text>
</Box>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Box,
        Text,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The box component consists of the following parts:

```jsx
export default () => (
  <Box>
    <Text>Box</Text>
  </Box>
);
```

## API Reference

### Box

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

<br />
<br />

## Examples

### Box with ref

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
function App () {
  const myRef = useRef({});
  useEffect(() => {
    const styleObj = {
      borderWidth: 8,
      borderRadius: 4,
      borderColor: '#22D3EE',
    };
    myRef.current.setNativeProps({
      style: styleObj,
    });
  }, [myRef]);
return (
<Wrapper>
  <Box sx={{ h: 100, w: 100, bg: '$red500' }} ref={myRef} />
</Wrapper>
);
    }
`,
      scope: { Box, Wrapper, useRef, useEffect },
      argsType: {},
    }}
  />
</AppProvider>

<br />

# Advanced

## Customizing the Box

For customizing the Box, you have to map styled view to Box. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root } from '../components/core/box/styled-components';

// mapping the Text to root component
const Box = Root;

// Using the box component
export default () => (
  <Box>
    <Text />
  </Box>
);
```

Default styling of the component can be found in the `components/box` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/ui-components/Box/index.tsx) of the styled `Box` component.