EEnterUI
DocsComponentsThemesDonation
Get Started
      • Container
      • Spacer
      • VStack
      • HStack
      • ZStack
      • Grid
      • LazyVGrid
      • LazyHGrid
EnterUIDocsLayout UtilitiesLayout PrimitivesContainersContainer
Layout UtilitiesUpdated 6 May 2026

Container

A responsive width constraint for product content.

Container defines how EnterUI handles a responsive width constraint for product content, including default structure, accessible states, and token-driven styling.

#Default usage

Container sizes

Use full only when the parent already owns width constraints.

Small containers keep focused content readable.

Code
<Container size="sm">
  <Card><CardContent><p className="docs-preview-muted">Small containers keep focused content readable.</p></CardContent></Card>
</Container>

#Import

Code
import { Card, CardContent, Container } from "@froggdesign/enter-ui-react";

#Accessibility

Container is semantic-neutral and renders a div. Choose meaningful semantic wrappers around it when needed.

#API

  • size: sm, md, lg, xl, or full.
  • Extends div props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousSearchInput
NextSpacer

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling