Box

A generic layout primitive that serves as a low-level container for grouping and styling content.

Box

Sizes

Use the box-{size} class to control the component size.

Size values can include:smmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Box

Customizing

globals.css


:root {
  --ex-box-px-sm: calc(var(--spacing) * 3);
  --ex-box-px-md: calc(var(--spacing) * 4);
  --ex-box-px-lg: calc(var(--spacing) * 5);
  --ex-box-px-xl: calc(var(--spacing) * 6);
 
  --ex-box-py-sm: calc(var(--spacing) * 3);
  --ex-box-py-md: calc(var(--spacing) * 4);
  --ex-box-py-lg: calc(var(--spacing) * 5);
  --ex-box-py-xl: calc(var(--spacing) * 6);
 
  --ex-box-radius-sm: var(--radius-sm);
  --ex-box-radius-md: var(--radius-sm);
  --ex-box-radius-lg: var(--radius-sm);
  --ex-box-radius-xl: var(--radius-sm);

API

Element	Selector
`Box`	`.ex-box`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`