Navigation & layoutBrick 0.1.2

Hide

Hide keeps content mounted while removing it from visual layout from one fixed viewport breakpoint. It is CSS layout, not conditional React rendering.

Live example

Built from the published package

Interactive

Visible below md

Resize the viewport to see Hide respond.

Choose with confidence

Know when Hide is the right part

Use it when

Use Hide for compact-only or secondary content that should leave layout at a standard width.

Choose another path when

Do not use Hide to prevent mounting, effects, fetching, or access to essential functionality. Use application CSS or React conditionals for different policies.

Installation and imports

tsx

import { Hide } from "@flowstack-ui/brick";
// or from "@flowstack-ui/brick/hide"
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/hide.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Exports: Hide, HideProps, HideBreakpoint, and HideElement.

Quick start

tsx

<Hide from="md"><nav aria-label="Compact workspace">Menu</nav></Hide>

Visual recipes and states

Below from, Hide assigns no display; from the threshold upward it applies display:none. It has no visual or interaction recipes.

Examples

tsx

<Hide as="aside" from="lg" aria-label="Compact help">Swipe for actions</Hide>

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Prop	Values	Default
`from`	`sm`, `md`, `lg`, `xl`	required
`as`	`div`, `span`, `section`, `article`, `nav`, `header`, `footer`, `main`, `aside`, `ul`, `ol`, `li`	`div`
`slot`	string	`hide`
`children`	ReactNode	required

Thresholds are 30rem, 48rem, 64rem, and 80rem.

Shared responsibility

Accessibility

Hide adds no role or ARIA. Hidden descendants leave focus navigation and the accessibility tree. Preserve essential functionality and own focus recovery on live resize.

Responsive behavior

Exact width ranges complement Show without gaps. Hidden children stay mounted. Paged media follows page-box width.

Stable visual contract

Styling and tokens

Customization

Native attributes, events, class, and non-display styles pass through. Use application CSS instead of overriding display.

Tokens and CSS hooks

Stable hooks are .brick-hide, data-from, and data-slot. There are no public variables.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground