Navigation & layoutBrick 0.1.12

Frame

Frame owns responsive logical size constraints for one local element. It does not own paint, spacing, child layout, parent participation, aspect ratio, overflow, semantics, or behavior.

Live example

Built from the published package

Interactive

A readable local measure

Frame constrains this content without taking over paint or child layout.

Choose with confidence

Know when Frame is the right part

Use it when

Use Frame for a minimum-width rail, maximum-width copy region, minimum-height media canvas, or maximum-height boundary around a ScrollArea.

Choose another path when

Use Container for shared page measure, Stack/Grid for arrangement, their Item parts for parent participation, Surface for paint, AspectRatio for ratio, and ScrollArea for scrolling. Keep product-specific calculations in a Block or application until they qualify as a reusable primitive rule.

Installation and imports

tsx

import { Frame } from "@flowstack-ui/brick";
// or
import { Frame } from "@flowstack-ui/brick/frame";

import "@flowstack-ui/brick/styles.css";

With modular styles, load core.css once and frame.css on every route that renders Frame.

tsx

import "@flowstack-ui/brick/styles/core.css";
import "@flowstack-ui/brick/styles/frame.css";

Public exports are Frame, FrameProps, FrameElement, FrameLength, and ResponsiveValue.

Quick start

tsx

<Frame maxInlineSize={{ initial: "100%", lg: "68ch" }}>
  <Text>Readable content</Text>
</Frame>

Visual recipes and states

Frame has no visual recipe or interactive state. It only resolves authored logical constraints. Unset properties retain native CSS sizing behavior.

Examples

Media canvas minimum height

tsx

<Frame minBlockSize={{ initial: "18rem", lg: "28rem" }}>
  <Surface>...</Surface>
</Frame>

One host with Surface paint

tsx

<Frame asChild maxInlineSize="44rem">
  <Surface as="article">...</Surface>
</Frame>

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	Value	Default
`as`	`div`, `span`, `section`, `article`, `aside`, `main`, `header`, `footer`, `nav`, `ul`, `ol`, `li`	`div`
`asChild`	`boolean`	`false`
`inlineSize`	responsive `string \| number`	native `auto`
`minInlineSize`	responsive `string \| number`	native `auto`
`maxInlineSize`	responsive `string \| number`	native `none`
`blockSize`	responsive `string \| number`	native `auto`
`minBlockSize`	responsive `string \| number`	native `auto`
`maxBlockSize`	responsive `string \| number`	native `none`
`slot`	`string`	`frame`

A responsive value is { initial, sm?, md?, lg?, xl? }. A nonzero number is serialized as pixels; strings accept valid CSS values such as rem, ch, percentages, min(), max(), and clamp().

Shared responsibility

Accessibility

Frame adds no role, label, focusability, state, or keyboard behavior. Verify that constraints do not clip focus indicators or hide long content at zoom, narrow widths, RTL, or vertical writing modes. maxBlockSize does not make overflow reachable by itself.

Responsive behavior

Values are mobile-first. Each authored value continues upward until another standard Brick breakpoint replaces it. No JavaScript viewport detection runs. Every Frame keeps its constraint variables locally scoped, so a parent's base or optional breakpoint values never replace a nested Frame's values.

Stable visual contract

Styling and tokens

Customization

Choose the six props first. Scoped CSS remains appropriate for product-specific calculations or geometry that is not a simple size constraint; report repeated fallbacks so the public grammar can be reassessed.

Tokens and CSS hooks

Stable hooks are .brick-frame, data-frame, data-slot, data-slot="frame", and --brick-frame-inline-size, --brick-frame-min-inline-size, --brick-frame-max-inline-size, --brick-frame-block-size, --brick-frame-min-block-size, and --brick-frame-max-block-size, each with optional -sm, -md, -lg, and -xl suffixes.

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