Layout

Container

Centered, max-width layout wrapper with responsive horizontal padding. Exposes its breakpoint and gutter as CSS variables for inline overrides.

layoutwrapperresponsivecontent-width

Default

Centered, full-width up to the xl breakpoint with horizontal padding at every size.

Centered content, max-width xl

Constrained

Padding kicks in only from the sm breakpoint, so content runs edge-to-edge on the smallest screens.

Edge-to-edge below sm, padded above

Custom max-width

Override the breakpoint variable inline to cap the content narrower.

Capped at md

Source

Copy this into your project. Resolve its dependencies from the registryDependencies in the component's API entry.

import { cn } from "@/lib/utils"

/**
 * Container — quebi design system
 *
 * A centered, max-width layout wrapper for page and section content. Keeps
 * content readable on wide viewports and adds responsive horizontal padding.
 *
 * The breakpoint and padding are exposed as CSS variables
 * (`--container-breakpoint`, `--container-padding`) so callers can override
 * the cap or gutter inline without forking the component.
 *
 * - `constrained` defers the horizontal padding until the `sm` breakpoint,
 *   letting content run edge-to-edge on the smallest screens.
 */
export interface ContainerProps extends React.ComponentProps<"div"> {
  /** Apply horizontal padding only from the `sm` breakpoint up. */
  constrained?: boolean
}

export function Container({ className, constrained = false, ref, ...props }: ContainerProps) {
  return (
    <div
      className={cn(
        "mx-auto w-full max-w-(--container-breakpoint) [--container-breakpoint:var(--breakpoint-xl)] [--container-padding:--spacing(4)]",
        constrained ? "sm:px-(--container-padding)" : "px-(--container-padding)",
        className,
      )}
      {...props}
      ref={ref}
    />
  )
}