ObjectUIObjectUI

Container

Centered content container with max-width

Examples

Basic Container

Content inside container

Schema

import type { SchemaNode } from '@object-ui/types';

interface ContainerSchema {
  type: 'container';
  children: SchemaNode[];
  // Max width constraint. `false` means NO maximum width, and it is rendered as
  // an explicit `max-w-none` — it cancels a max-width inherited from elsewhere
  // (the typography plugin's `prose`, for instance), which simply omitting the
  // class would not do.
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
    | '7xl' | 'full' | 'screen' | false;   // default: 'xl'
  centered?: boolean;                       // default: true
  padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 16;  // default: 4
  className?: string;
}

padding is a step on the container's spacing scale, and 0 means none. The twelve steps are the ones the renderer maps to a padding class, so they are the only values validation accepts: "padding": 9 or "padding": 20 is refused with the set named (objectui#11424). Such a number used to pass validation and then render with no padding at all, not even the default.

On this page