Skip to main content
Hidden provides a simple way to show or hide content based on viewport size using responsive breakpoints. It supports both display and visibility hiding methods.

​
Import

import { Hidden } from 'reshaped';

​
Basic Usage

<View gap={4}>
  <Hidden hide={{ s: true, m: false }}>
    <View padding={4} backgroundColor="neutral-faded">
      Hidden on small screens, visible on medium and up
    </View>
  </Hidden>
</View>

​
Hide on Large Screens

<Hidden hide={{ s: false, m: true }}>
  <View padding={4} backgroundColor="primary-faded">
    Visible on small screens only
  </View>
</Hidden>

​
Using Visibility Instead of Display

<Hidden hide={{ s: true, m: false }} visibility>
  <View padding={4} backgroundColor="neutral-faded">
    Uses visibility: hidden instead of display: none
  </View>
</Hidden>

​
With Different Elements

<Hidden hide={{ s: true, m: false }} as="section">
  <View padding={4} backgroundColor="neutral-faded">
    Renders as a section element
  </View>
</Hidden>

​
Responsive Navigation Example

<View direction="row" gap={4} align="center">
  <View padding={4} backgroundColor="primary">Logo</View>
  
  <Hidden hide={{ s: true, m: false }}>
    <View direction="row" gap={3}>
      <Button>Home</Button>
      <Button>About</Button>
      <Button>Contact</Button>
    </View>
  </Hidden>
  
  <Hidden hide={{ s: false, m: true }}>
    <Button icon={IconMenu} />
  </Hidden>
</View>

​
With View Items

<View direction="row" gap={4}>
  <View.Item grow>
    <View padding={4} backgroundColor="neutral-faded">Main Content</View>
  </View.Item>
  
  <Hidden hide={{ s: true, l: false }}>
    <View.Item columns={3}>
      <View padding={4} backgroundColor="primary-faded">Sidebar</View>
    </View.Item>
  </Hidden>
</View>

​
Props

​
children
React.ReactNode
required
Node for inserting children
​
hide
Responsive<boolean>
Pick at which viewport sizes to hide the children. Use responsive breakpoints: { s: boolean, m: boolean, l: boolean }
​
visibility
boolean
Use visibility: hidden instead of display: none. This maintains the element’s space in the layout while making it invisible
​
as
keyof React.JSX.IntrinsicElements
Custom root element html tag (default: “div”)
Hidden works seamlessly with View’s divided prop - when an item is hidden, its divider is also hidden automatically.
Use visibility when you need to maintain layout spacing even when content is hidden. Without it, the element is completely removed from the layout.
The responsive hide prop follows Reshaped’s breakpoint system: s (small), m (medium), l (large).

Build docs developers (and LLMs) love

Get started for freeTalk to us