Skip to content
Aback UI

Layout

Layout

Container, Stack, Group, and Grid primitives that map to the Aback spacing scale.

BetaUsed in Aback Tools, Aback LaunchRegistry JSON (opens in a new tab)
Group · justify between
Grid 1
Grid 2
Grid 3
Stack · xs
Stack · xs

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add layout

Writes components/ui/layout.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx
import {
  Container,
  Grid,
  Group,
  Stack,
} from "@/components/ui/layout";

API reference

Props and composition points for Layout. Native element props pass through.

PropTypeDefaultDescription
Container size"sm" | "md" | "lg" | "xl" | "full""lg"Max width of a centred column, with the 16px mobile and 24px md gutter.
Stack gap"none" | "xs" | "sm" | "md" | "lg" | "xl""md"Vertical flow: 0, 4, 8, 16, 24, or 32px between children.
Group gap / align / justify / wrapLayoutGap / align / justify / boolean"sm" / "center" / "start" / trueA horizontal row for toolbars. It wraps by default so action rows never overflow a phone.
Grid columns / gap1 | 2 | 3 | 4 | 6 / LayoutGap3 / "md"A card grid that starts at one column (two for six) and steps up at sm and lg.
asChildbooleanfalseRender the child element, so a Container can be the page's main or a section.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • The primitives are plain divs by default and add no roles. Use asChild to put landmark elements such as main or section in place.
  • Visual order follows source order. Do not reorder content with CSS in a way that breaks the reading and focus order.
  • Group wraps instead of shrinking controls, so touch targets keep their size on narrow screens.
  • Every gap maps to a literal Tailwind class, so nothing depends on dynamically generated class names.

Used in production

The Aback products whose interfaces shaped this component.

Related