Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Display

Style props for styling display of an element.

Display Property

<Box display="flex" />

// responsive
<Box display={{ base: "none", md: "block" }} />
PropCSS PropertyToken Category
displaydisplay-

Hiding Elements

Hide From

Use the hideFrom prop to hide an element from a specific breakpoint.

<Box display="flex" hideFrom="md" />
PropCSS PropertyToken Category
hideFromdisplaybreakpoints

Hide Below

Use the hideBelow prop to hide an element below a specific breakpoint.

<Box display="flex" hideBelow="md" />
PropCSS PropertyToken Category
hideBelowdisplaybreakpoints

Previous

Border

Next

Effects