Show / Hide

Import#

import { Show, Hide } from '@chakra-ui/react'

• Show: Show the children if the media query matches.
• Hide: Hide the children if the media query matches.

Usage#

Breakpoint Prop#

Use the breakpoint prop to pass in a custom query.

Above / Below#

The above and below props receive the Chakra theme's breakpoint keys.

• above is similar to "min-width"
• below is similar to "max-width"

Note: You can not combine above and below props

Props#