Stack & Grid

Preview

Installation

npx echo-ui-cli add layout

At a glance

Version

0.3.0

Weight

483 B · 269 B of CSS (minified and gzipped; React not counted)

Keyboard

Order on screen is the order in the source, so reading and tab order follow what's seen.

Usage

import { Stack, Grid } from "@/echo/layout";

<Stack gap={6}>{children}</Stack>

Composition

Stack → flex; Grid → grid

Examples

<Stack gap={8}>
  <Field label="Name" />
  <Field label="Email" />
</Stack>

<Stack direction="row" gap={4} justify="end">
  <HardwareButton>Cancel</HardwareButton>
  <HardwareButton variant="primary">Save</HardwareButton>
</Stack>

<Grid minItemWidth="16rem" as="ul">{cards}</Grid>

Accessibility

• No role of its own; as gives it one when the grouping means something (a ul of cards, a nav).
• Order on screen is the order in the source, so reading and tab order follow what's seen.

Props

Anti-patterns

• Never use a Grid for a table of data: that's a Table, which a screen reader can navigate by row and column.
• Never reverse visual order with layout: tab order would stop matching what's seen.

Changelog

• v0.3.0 · 2026-10-12 · ChangedEvery item needs echo-ui-core 0.3.0 (all components). The drawn device, readability past AA and the design tests live in core, and the components that use them are built against it, so each item now declares echo-ui-core >=0.3.0 <0.4.0. Update core with the items: npm install echo-ui-core@^0.3.0 (or your package manager's), then npx echo-ui-cli update. An item whose files didn't change is the same code under a new version; the 0.2.0 files stay published.
• v0.3.0 · 2026-10-12 · FixedGrid, ChoiceCards and ShortcutMap no longer leave columns empty (BUG-189). Fewer items than fit share the row (auto-fit), so two cards in a row with room for three are two wide cards, not two cards and a gap.
• v0.2.0 · 2026-10-04 · AddedSix containers: Card, Item, Stack & Grid, Collapsible, ScrollArea and Link. The pieces every screen is laid out with, so nobody spaces a card by hand. All six are closed: their slots and spacing are props, not a className. - Card is a Panel with an anatomy (media, a header with one action, a body, a footer whose controls are sm) and size for its padding. With href or onClick the whole card is one link or button, named by its title, with one focus ring; it lifts as you reach for it, sinks a pixel as you press and sends Panel's ripple out from your finger. - Item is the list row: media, title, description, trailing content, ruled by a hairline. swipeActions sit behind it: swipe it and they slide into view, and Tab reaches each one, sliding the row open the same way, so the gesture is never the only way in. - Stack & Grid (echo-layout) take gaps as steps on the space scale; a row wraps and a Grid's columns never get wider than the screen. - Collapsible is one disclosure on its own, in Accordion's ruled style; closed content stays findable with find-in-page, which opens it. - ScrollArea scrolls inside itself with a groove and a molded thumb, shades whichever edge has more to see, and is a named region the keyboard can scroll. - Link keeps the words in the text colour and draws the accent as the underline (accent text on the chassis is under AA); external says it opens a new tab; render takes your router's link.
• v0.2.0 · 2026-10-04 · ChangedComments only, no behaviour change. Comments in the component source used to cite documents, milestones and ticket numbers from Echo's own planning, none of which exist in your project. The citations are gone and the sentences around them stay. Where a comment was only a citation, it now says what it meant. Three development warnings (HardwareButton's engraved/caption checks and StatusDot's missing-label check) also dropped the ticket code at the end of the message. echo-ui diff will show changes in most items; none of them are to code.
• v0.2.0 · 2026-10-04 · ChangedAn item's version is now a function of declared data, not of how the changelog is formatted. The version an item ships under is published once and never rewritten, and it used to be inferred from prose: a regex for a bolded "Breaking" run across the whole unreleased section, and attribution by "does a bullet mention this name in backticks". One breaking entry therefore moved every item that changed that cycle, and an entry explaining that "Menu and Sheet are unchanged here" filed itself as a change to Menu and Sheet — which it really had.
• v0.2.0 · 2026-10-04 · ChangedThe agent brief says Echo has not shipped. llms.txt and the MCP server's instructions led with npx echo-ui-cli init, and that name on npm is a reserved stub with no executable — so a model following the brief wrote an install step that fails with npx's own error. The brief now opens with the caveat, and the docs carry it on every surface that shows a command. One switch (CLI_RELEASED) silences all of them at launch, and a test refuses to let one move without the others. Affects all components only in what the brief says about installing them; no item's props, CSS or rendered semantics change.
• v0.2.0 · 2026-10-04 · ChangedEcho's home is echo-ui.com. The registry, the docs and the packages all move to it from echo.nawwara.studio. Nothing was published under the old host, so no echo.json anywhere points at it and there is nothing to migrate — this is the last release where that is true.
• v0.2.0 · 2026-10-04 · ChangedWeights, line heights, letter-spacing, z-index, border widths and icon sizes come from the theme scales in all components, with the old value as a fallback, so components keep working with echo-ui-core@0.0.1. Strays moved to the nearest step: most by under a pixel; HardwareButton icons are 14/16/20px (were 15/17/19).
• v0.2.0 · 2026-10-04 · FixedContent now reflows into a 320px screen (400% zoom) and survives a doubled browser text size (WCAG 1.4.10, 1.4.4), across all components. Select's 180px floor, NumberField's readout, Segmented and Steps as flex items, EmptyState's grid columns, and Avatar's fixed-pixel disc all gave way; Panel counts its padding inside a width you set (box-sizing: border-box), so a <Panel style={{ width: 220 }}> is now 220px wide overall rather than 260px.