@neo4j-ndl/react/skills/ndl-react/components/box.md

React implementation of Neo4j Design System

# Box

Import: `import { Box } from '@neo4j-ndl/react'`

## Props

### Box

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `as` | `ElementType<any, keyof IntrinsicElements>` |  | `'div' as T` | An override of the default HTML tag of the root of the component. Can also be another React component. |
| `borderRadius` | `'2xl' \| '3xl' \| 'full' \| 'lg' \| 'md' \| 'none' \| 'sm' \| 'xl'` |  | `undefined` |  |
| `children` | `ReactNode` |  |  |  |
| `padding` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `tokens.space['4']` |  |
| `paddingBlockEnd` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |
| `paddingBlockStart` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |
| `paddingInline` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |
| `paddingInlineEnd` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |
| `paddingInlineStart` | `'12' \| '16' \| '2' \| '20' \| '24' \| '32' \| '4' \| '48' \| '6' \| '64' \| '8'` |  | `undefined` |  |
| `ref` | `any` |  |  | A ref to apply to the root element. |

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Box } from '@neo4j-ndl/react';
import type React from 'react';

type BoxProps = React.ComponentProps<typeof Box>;

const BoxDefault = (args: BoxProps) => <Box {...args}>{args.children}</Box>;

BoxDefault.displayName = 'BoxDefault';

export default BoxDefault;
```