Box
Description
The most basic of all components, all other layout components are based on this one. Implements some props for layout definition and should be used at the lowest level when defining new components.
Demo
import { Box } from "@neui/layout";
Live Editor
Result
Loading...
Props
| CSS Prop | Extends | RenderAs Prop | Renders by default |
|---|---|---|---|
| undefined | div |
| Name | CSS Rule(s) | Description |
|---|---|---|
padding | padding | Sets the component's padding |
paddingX | padding-left, padding-right | Sets the component's X-axis padding |
paddingY | padding-top, padding-bottom | Sets the component's Y-axis padding |
paddingTop | padding-top | Sets the component's top padding |
paddingRight | padding-right | Sets the component's right padding |
paddingBottom | padding-bottom | Sets the component's bottom padding |
paddingLeft | padding-left | Sets the component's toleftp padding |
margin | margin | Sets the component's margin |
marginX | margin-left, margin-right | Sets the component's X-axis margin |
marginY | margin-top, margin-bottom | Sets the component's Y-axis margin |
marginTop | margin-top | Sets the component's top margin |
marginRight | margin-right | Sets the component's right margin |
marginBottom | margin-bottom | Sets the component's bottom margin |
marginLeft | margin-left | Sets the component's left margin |
size | width, height | Sets the component's size by setting width and height |
width | width | Sets the component's width |
height | height | Sets the component's height |
minWidth | min-width | Sets the component's min-width |
maxWidth | max-width | Sets the component's max-width |
minHeight | min-height | Sets the component's min-height |
maxHeight | max-height | Sets the component's max-height |
aspectRatio | aspect-ratio | Sets the component's aspect-ratio |