# Hidden

> Hide children below or above a breakpoint, or visually only.

URL: https://apogee.avaui.dev/docs/hidden
Last updated: 2026-10-15

Hide children below or above a breakpoint, or visually only.

Last updated October 15, 2026

```astro
<Hidden below="md">Shown from md up</Hidden>
<Hidden above="md">Shown below md</Hidden>
<Hidden visually>Read by screen readers only</Hidden>
```

## Add

```sh
npx @ava-ui/apogee add hidden
```

No Apogee dependencies.

## Usage

```astro
---
import Hidden from '@/components/apogee/Hidden/Hidden.astro'
---
<Hidden below="lg"><Sidebar /></Hidden>
<Hidden above="lg"><MobileNav /></Hidden>
```

## API

`@composable`. Any other native attribute passes through.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `below` | `'sm' \| 'md' \| 'lg' \| 'xl'` | — | Hidden on viewports narrower than the breakpoint. |
| `above` | `'sm' \| 'md' \| 'lg' \| 'xl'` | — | Hidden on viewports at or wider than the breakpoint. |
| `visually` | `boolean` | `false` | `sr-only`: removed from view, kept for assistive tech. |
| `as` | `'div' \| 'span'` | `'div'` | Tag to render. |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

```astro
<Hidden below="sm">below sm</Hidden>
<Hidden below="md">below md</Hidden>
<Hidden below="lg">below lg</Hidden>
<Hidden below="xl">below xl</Hidden>
<Hidden above="sm">above sm</Hidden>
<Hidden above="md">above md</Hidden>
<Hidden above="lg">above lg</Hidden>
<Hidden above="xl">above xl</Hidden>
```

## Accessibility

-   Breakpoint hiding uses `display: none`: the content is removed for everyone at that size, including screen readers. Don’t hide the only route to a feature.
-   `visually` keeps the content in the accessibility tree. Use it for labels that sighted users get from context.

## Tokens

None. Breakpoints come from Tailwind’s `--breakpoint-*` scale.

Layout primitive, so no content rules.

## Related

[

ThemeA subtree in light, dark, or the opposite of its surroundings, plus the helpers that switch the page mode.

](https://apogee.avaui.dev/docs/theme)[

BoxThe layout primitive. Direction, gap, padding, surface, border, radius and shadow as token props.

](https://apogee.avaui.dev/docs/box)[

ContainerCenters content at a max width with fluid side gutters.

](https://apogee.avaui.dev/docs/container)