/ux
Components/Layout/Container

Container

Layout

Max-width wrapper with consistent horizontal padding.

Centers content with a max-width. Size tokens map to fixed widths: xs=540px, sm=720px, md=960px, lg=1200px, xl=1320px, fluid=unconstrained.

Usage

import { Container } from "nosible-ux"

export default function Example() {
  return (
    <Container size="lg">
      Page content
    </Container>
  )
}

Examples

Size comparison

XS — 540px
MD — 960px
LG — 1200px

Props

Name TypeDefaultDescription
asChild
boolean | undefined—When true, merges Container styles onto the child element instead of a wrapper div.
px
number | undefined—Horizontal padding in pixels. Default: 20 (base grid).
size
"xs" | "sm" | "md" | "lg" | "xl" | "fluid" | undefined—Max-width breakpoint for the container. xs=540 · sm=720 · md=960 · lg=1140 · xl=1320 · fluid=no limit. Default: 'lg'.
← All ComponentsGetting Started →