Develop ultra fast with Prismane 🎉


Hide displays a container that hides under a breakpoint.


import { Hide } from "@prismane/core";


The Hide component will hide it's content, when the screen is bigger than the provided breakpoint. By default, the breakpoint prop has a value of base (1024px)

<Hide>Hidden over base (1024px) breakpoint!</Hide>

Custom breakpoint

<Hide breakpoint="2000px">Hidden over 2000px!</Hide>

Hide Sizes

<Stack direction="column" gap={fr(2)}>
  <Hide breakpoint="xs">Hidden over xs (640px) breakpoint!</Hide>
  <Hide breakpoint="sm">Hidden over sm (768px) breakpoint!</Hide>
  <Hide breakpoint="base">Hidden over base (1024px) breakpoint!</Hide>
  <Hide breakpoint="md">Hidden over md (1280px) breakpoint!</Hide>
  <Hide breakpoint="lg">Hidden over lg (1536px) breakpoint!</Hide>


Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.