Navigation & layoutBrick 0.1.2

Show

Show keeps content mounted and adds it to visual layout from one fixed viewport breakpoint. It is CSS responsive visibility, not conditional React rendering.

Live example

Built from the published package

Interactive

Visible from md

Resize the viewport to see Show respond.

Choose with confidence

Know when Show is the right part

Use it when

Use Show for a secondary desktop treatment when deterministic SSR and always-mounted children are appropriate.

Choose another path when

Do not use Show to prevent effects, fetching, state initialization, or access to essential functionality. Use application CSS for custom/container queries and React conditionals for actual mounting.

Installation and imports

tsx

import { Show } from "@flowstack-ui/brick";
// or from "@flowstack-ui/brick/show"
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/show.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: Show, ShowProps, ShowBreakpoint, and ShowElement.

Quick start

tsx

<Show from="md"><nav aria-label="Workspace">Desktop tools</nav></Show>

Visual recipes and states

Below from, Show applies display:none; from the threshold upward it assigns no display value. It has no colors, spacing, typography, interaction, appearance, RTL, or motion recipe.

Examples

tsx

<Show as="aside" from="lg" aria-label="Release guidance">Review checklist</Show>

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	`show`
`children`	ReactNode	required

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

Shared responsibility

Accessibility

Show adds no role or ARIA. display:none removes hidden descendants from focus navigation and the accessibility tree. Preserve an equivalent path to essential content and own focus recovery if live resize hides the active control.

Responsive behavior

Queries use exact width ranges with no fractional gap. Hidden children remain in the DOM and mounted. Paged media follows page-box width.

Stable visual contract

Styling and tokens

Customization

Native attributes, events, class, and non-display styles pass through. Do not override display; use application media CSS when the fixed policy is unsuitable.

Tokens and CSS hooks

Stable hooks are .brick-show, 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