LayoutUpdated May 3, 2026

Container

A responsive width constraint for product content.

#Default usage

Container sizesUse full only when the parent already owns width constraints.

Small containers keep focused content readable.

#Usage

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

export function Example() {
  return (
    <Container size="sm">
      <Card><CardContent><p className="docs-preview-muted">Small containers keep focused content readable.</p></CardContent></Card>
    </Container>
  );
}

#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.