Show

Its children at some widths and not at others. A floor, a ceiling, or both, on the same five-step ladder every other breakpoint in the library uses.

import { Show } from 'neba';

<Show above="md">
  <Sidebar />
</Show>;

Props

Prop	Type	Default	Description
above	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	The narrowest width the children are drawn at, inclusive. Below it they are not drawn. xs is a floor of zero and so means "always"
below	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	The width at which the children stop being drawn, exclusive, so it pairs with above at the same breakpoint to cover every width exactly once. below="xs" draws nothing at all
render	useRender.RenderProp	—	Renders something other than a div (render={<td />}). Base UI's own escape hatch
children	ReactNode	—	What is drawn at some widths and not others. Always rendered; what changes is display

Native <div> attributes pass through, and render swaps the element. The five breakpoints and what they are worth are described in breakpoints.

Examples

above and below

above is inclusive and below is exclusive, so the same breakpoint in both covers every width exactly once with no gap and no overlap. That pair is the common case: one arrangement for a phone, another for everything else.

import { Box, Button, ButtonGroup, Show } from 'neba';

export default function ShowPair() {
  return (
    <Box className="w-full max-w-2xl">
      <Show below="sm">
        <Button fullWidth>Actions</Button>
      </Show>
      <Show above="sm">
        <ButtonGroup>
          <Button>Duplicate</Button>
          <Button>Archive</Button>
          <Button>Export</Button>
        </ButtonGroup>
      </Show>
    </Box>
  );
}

Bounding a range

Given together they are a floor and a ceiling: above="sm" below="lg" is drawn from 40rem up to but not including 64rem.

import { Chip, Show } from 'neba';

export default function ShowRange() {
  return (
    <div className="flex w-full max-w-2xl flex-wrap gap-2">
      <Show below="sm">
        <Chip color="secondary">xs — under 40rem</Chip>
      </Show>
      <Show above="sm" below="lg">
        <Chip color="primary">sm and md — 40rem to 64rem</Chip>
      </Show>
      <Show above="lg">
        <Chip color="success">lg and up — 64rem and over</Chip>
      </Show>
    </div>
  );
}

It adds no box

The wrapper is display: contents, so a Show between a GridContainer and a Grid leaves the cell a cell, and one inside a flex row leaves its children flex items. Nothing given to it to style (padding, a background) has anywhere to land; put those on an element inside it, or name the element with render.

import { Box, Grid, GridContainer, Show } from 'neba';

export default function ShowTransparent() {
  return (
    <GridContainer spacing={2} padded={false} className="w-full">
      <Grid span={{ xs: 12, md: 8 }}>
        <Box variant="solid">The article</Box>
      </Grid>
      {/* Still a grid item: `Show` is `display: contents`, so it adds no box
          between the container and the cell. */}
      <Show above="md">
        <Grid span={4}>
          <Box>The aside, from md up</Box>
        </Grid>
      </Show>
    </GridContainer>
  );
}

Not rendering at all

The children are always rendered: what changes is display. That is what makes the answer right in the first frame the browser paints, and the same answer on a server.

When something must not run below a width, such as a component that fetches or mounts a map, CSS cannot make that decision. useBreakpoint is what makes it. It answers false on a server and on the first client render, so what it controls arrives after hydration.

import { useBreakpoint } from 'neba';

const wide = useBreakpoint('md');

return wide ? <Map /> : <StaticImage />;

render

render names the element, which is what a Show inside a table or a list needs: a <div> is not allowed between a <tr> and a <td>.

<tr>
  <td>{row.name}</td>
  <Show above="lg" render={<td />}>
    {row.updatedAt}
  </Show>
</tr>

Accessibility

• A hidden branch is display: none, so it is out of the accessibility tree and out of the tab order as well as off the screen. Nothing is announced twice.
• Both halves of an above/below pair are in the DOM at every width, so anything that must not be duplicated (an id, a form control's name, a heading) has to differ between them or live outside the pair.