Back to Schema Browser

Container

Layout container that holds child components. Can contain any type of child component.

Required Props: idSupports Children: any

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

PropertyTypeDescriptionExamples
typestring
| container | section | page | header | footer | nav | aside | main | form | component | imageContainer | details | summary
Semantic/layout role of the container; drives HTML tag (section, article, header, footer, nav, form, etc.)
Default: "container"
-
isHomePageboolean
Marks the home page container
Default: false
-
is404Pageboolean
Marks the 404 page container
Default: false
-
anchorstring
HTML id for in-page links and click targets
-
tabGroupstring
Tab group identifier for tabbed UIs
-
actionstring
When type is form, form action URL
-
methodstring
When type is form, HTTP method
-
targetstring
When type is form, form target (e.g. iframe name)
-
idstring
Explicit DOM id on the outer element
-
rolestring
ARIA role override
-
aria-labelstring
ARIA label
-
aria-hiddenstring
ARIA hidden
-
aria-describedbystring
ARIA describedby
-
aria-livestring
polite | assertive | off
-
-
clickobject
-
-
canDeleteboolean
-
Default: true
-
canEditNameboolean
-
Default: true
-
customobject
Editor metadata (displayName, id, ...)
-
classNamestring
Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.
flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold
urlstring
Optional link URL when used as link wrapper contexts
-
urlTargetstring
Link target e.g. _blank
-
relationobject
-
-
seoobject
Per-page SEO on Container nodes with type: 'page'. Falls back to ROOT Background.seo when unset.
-
backgroundobject
-
-
rootobject
-
-
activeTabnumber
Active tab index when using tab patterns
-
overflowobject
-
-
handlersobject
Custom JS event handlers. Record<string, string> mapping a React event name (onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onSubmit, onKeyDown, …; must match /^on[A-Z]/) to a JS code string evaluated as a function body with `event` in scope. Runs after any `action` on the same event. Execution is suppressed in the editor. Static export emits each entry as a native HTML event attribute (onclick="…"). Event keys in `attrs` are ignored by React — put them here instead.
-

Examples

Header Content Container

A horizontal container for header content with logo and navigation

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-row justify-between items-center w-full gap-4 p-container-y bg-base-100 text-base-content"
}

Hero Section Container

A full-screen hero section container that centers content vertically and horizontally

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-col items-center justify-center w-full min-h-screen"
}

Page Container

A main page container that holds all page sections with proper spacing

{
  "type": "page",
  "canDelete": false,
  "canEditName": true,
  "isHomePage": true,
  "className": "flex flex-col w-full gap-section bg-base-100 text-base-content"
}

Content Width Container

A container that constrains content to the design system content width with proper padding

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-col items-center gap-section max-w-content mx-auto px-6"
}

Footer Content Container

A footer container with alternate background styling

{
  "canDelete": true,
  "canEditName": true,
  "className": "flex flex-col justify-center items-center w-full p-container-y gap-container bg-base-200 text-base-content"
}