# `PhiaUi.Components.Layout.ResponsiveVisibility`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/responsive_visibility.ex#L1)

Responsive visibility components for declaratively showing or hiding content
at specific breakpoints.

These components eliminate ad-hoc `hidden md:block` class strings by encoding
the intent as a component with a typed `:at` or `:from`/`:to` attribute.

## Components

- `show_on/1` — shows content **at or above** a breakpoint
- `hide_on/1` — hides content **at or above** a breakpoint
- `show_between/1` — shows content **between** two breakpoints

## Examples

    <%!-- Desktop-only sidebar --%>
    <.show_on at={:lg}>
      <aside>Sidebar content</aside>
    </.show_on>

    <%!-- Hide verbose text on small screens --%>
    <.hide_on at={:md}>
      <p>This paragraph is only visible on mobile.</p>
    </.hide_on>

    <%!-- Tablet-only content --%>
    <.show_between from={:md} to={:xl}>
      <p>Visible on tablets only.</p>
    </.show_between>

# `hide_on`

Hides content at or above the specified breakpoint.
## Attributes

* `at` (`:atom`) - Breakpoint at or above which the content becomes hidden. Defaults to `:md`. Must be one of `:sm`, `:md`, `:lg`, `:xl`, or `:"2xl"`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content to hide at the specified breakpoint.

# `show_between`

Shows content between two breakpoints (visible from `:from`, hidden at `:to`).
## Attributes

* `from` (`:atom`) - Lower breakpoint (content becomes visible here). Defaults to `:sm`. Must be one of `:sm`, `:md`, `:lg`, `:xl`, or `:"2xl"`.
* `to` (`:atom`) - Upper breakpoint (content becomes hidden here). Defaults to `:lg`. Must be one of `:sm`, `:md`, `:lg`, `:xl`, or `:"2xl"`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content visible between the two breakpoints.

# `show_on`

Shows content only at or above the specified breakpoint.
## Attributes

* `at` (`:atom`) - Breakpoint at or above which the content becomes visible. Defaults to `:md`. Must be one of `:sm`, `:md`, `:lg`, `:xl`, or `:"2xl"`.
* `as` (`:atom`) - HTML element to render — `:div` uses `block`, `:span` uses `inline`. Defaults to `:div`. Must be one of `:div`, or `:span`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content to show at the specified breakpoint.

---

*Consult [api-reference.md](api-reference.md) for complete listing*