Develop ultra fast with Prismane 🎉


Show displays a container that hides under a breakpoint.


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


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

<Show>Shown over base (1024px) breakpoint!</Show>

Custom breakpoint

<Show breakpoint="1440px">Shown over 1440px!</Show>

Show Sizes

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


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