# Box
URL: /react/components/layout/box
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/react/components/(foundation)/layout/box.mdx

Box 컴포넌트는 가장 기초적인 레이아웃 컴포넌트입니다. 디자인 토큰을 JSX에서 사용할 수 있도록 도와줍니다.

## Preview

```tsx
import { Box } from "@seed-design/react";

export default function BoxPreview() {
  return (
    <Box
      bg="bg.neutralWeak"
      borderWidth="2"
      borderColor="stroke.brandWeak"
      borderRadius="r2"
      px="x3"
      py="x2"
      boxShadow="s2"
    >
      Box Example
    </Box>
  );
}
```

## Usage

```tsx
import { Box } from "@seed-design/react";
```

```tsx
<Box />
```

## Props

## Examples

### Gradient

```tsx
import { Box, VStack } from "@seed-design/react";

export default function BoxGradient() {
  return (
    <VStack gap="x2">
      <Box
        backgroundGradient="highlightMagic"
        backgroundGradientDirection="43deg"
        borderRadius="r2"
        color="palette.staticWhite"
        px="x3"
        py="x2"
      >
        Box Gradient
      </Box>
      <Box
        backgroundGradient="highlightMagic"
        backgroundGradientDirection="to bottom"
        borderRadius="r2"
        color="palette.staticWhite"
        px="x3"
        py="x2"
      >
        Box Gradient
      </Box>
    </VStack>
  );
}
```

## Responsive Design

<Card title="Responsive Design" href="/react/components/concepts/responsive-design">
  Box의 레이아웃 프로퍼티에 반응형 값을 전달하여 viewport 크기에 따라 스타일을 조정할 수 있습니다.
</Card>