Box
A versatile layout primitive that serves as the foundation for building UI. Box provides comprehensive styling props for spacing, colors, borders, positioning, and more. Use it to wrap and position other components, create cards, or build custom layouts.
I am a box.
With properties
I am a box.
Responsive sizing
Use Tailwind preset values for width and height with responsive breakpoints. Resize your browser window to see this box change width: full width on mobile, half width on medium screens, and one-third on large screens.
Responsive width
State styles
Apply styles for hover, focus, and active states using object props. Each state accepts color, backgroundColor, borderColor, and opacity.
Hover over me
Multiple states
Click to focus, then hover and click to see all states.
Interactive box (hover, focus, active)
Component props
| Name | Type | Values |
|---|---|---|
| display | Responsive<Display> | "none" | "inline" | "inline-block" | "block" |
| position | Responsive<Position> | "static" | "relative" | "absolute" | "fixed" | "sticky" |
| color | FontColor | SemanticColor | ColorName | TailwindColor |
| backgroundColor | BackgroundColor | SemanticColor | SurfaceColor | ColorName | TailwindColor |
| fontSize | Responsive<FontSize> | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | ... | "9xl" |
| fontWeight | Responsive<FontWeight> | "thin" | "light" | "normal" | "medium" | "semibold" | "bold" | ... |
| textAlign | Responsive<TextAlign> | "left" | "center" | "right" |
| border | Responsive<Border> | true | "top" | "right" | "bottom" | "left" | "none" |
| borderColor | BorderColor | SemanticColor | ColorName | TailwindColor |
| borderWidth | Responsive<BorderWidth> | "sm" | "md" | "lg" | "xl" |
| borderRadius | Responsive<BorderRadius> | true | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" |
| shadow | Responsive<BoxShadow> | true | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" |
| padding | Responsive<Padding> | true | Spacing |
| paddingX | Responsive<Padding> | true | Spacing |
| paddingY | Responsive<Padding> | true | Spacing |
| paddingTop | Responsive<Padding> | Spacing |
| paddingRight | Responsive<Padding> | Spacing |
| paddingBottom | Responsive<Padding> | Spacing |
| paddingLeft | Responsive<Padding> | Spacing |
| margin | Responsive<Spacing> | "0" | "1" | "2" | "3" | "4" | ... or negative |
| marginX | Responsive<Spacing> | Spacing |
| marginY | Responsive<Spacing> | Spacing |
| marginTop | Responsive<Spacing> | Spacing |
| marginRight | Responsive<Spacing> | Spacing |
| marginBottom | Responsive<Spacing> | Spacing |
| marginLeft | Responsive<Spacing> | Spacing |
| width | Responsive<Width | string> | Spacing | Fraction | "auto" | "full" | "screen" | "min" | "max" | "fit" | custom CSS |
| minWidth | Responsive<MinWidth | string> | Spacing | "full" | "min" | "max" | "fit" | custom CSS |
| maxWidth | Responsive<MaxWidth | string> | Spacing | "none" | "xs"-"7xl" | "full" | "prose" | "screen-*" | custom CSS |
| height | Responsive<Height | string> | Spacing | Fraction | "auto" | "full" | "screen" | "min" | "max" | "fit" | custom CSS |
| minHeight | Responsive<MinHeight | string> | Spacing | "full" | "screen" | "min" | "max" | "fit" | custom CSS |
| maxHeight | Responsive<MaxHeight | string> | Spacing | "none" | "full" | "screen" | "min" | "max" | "fit" | custom CSS |
| top | string | CSS value (inline style) |
| right | string | CSS value (inline style) |
| bottom | string | CSS value (inline style) |
| left | string | CSS value (inline style) |
| overflow | Responsive<Overflow> | "visible" | "hidden" | "clip" | "scroll" | "auto" |
| overflowX | Responsive<Overflow> | "visible" | "hidden" | "clip" | "scroll" | "auto" |
| overflowY | Responsive<Overflow> | "visible" | "hidden" | "clip" | "scroll" | "auto" |
| cursor | Responsive<Cursor> | "auto" | "default" | "pointer" | "wait" | "text" | "move" | "not-allowed" | ... |
| opacity | Responsive<Opacity> | "0" | "5" | "10" | "15" | ... | "95" | "100" |
| pointerEvents | Responsive<PointerEvents> | "none" | "auto" |
| alignSelf | Responsive<AlignSelf> | "center" | "start" | "end" | "stretch" | "baseline" | ... |
| justifySelf | Responsive<JustifySelf> | "center" | "start" | "end" | "stretch" | ... |
| flexBasis | string | CSS value (inline style) |
| flexGrow | string | number | Inline style |
| flexShrink | string | number | Inline style |
| gridArea | string | CSS value (inline style) |
| gridRow | string | CSS value (inline style) |
| gridColumn | string | CSS value (inline style) |
| order | number | Inline style |
| zIndex | number | Inline style |
| hover | StateStyles | { color?, backgroundColor?, borderColor?, opacity? } |
| focus | StateStyles | { color?, backgroundColor?, borderColor?, opacity? } |
| active | StateStyles | { color?, backgroundColor?, borderColor?, opacity? } |
| as | string | HTML element to render |
| render | RenderProp | Render prop for polymorphism |