Import
import { Container } from "@sugarcoat/ui-nxt";Usage
<Container size="md">
Your content here
</Container>Basic Usage#
A container that centers content with responsive max-width.
Basic Container
Sizes#
The container size controls its maximum width, mapping to breakpoints.
Extra Small
Small
Medium
Large
Extra Large
2XL
Full
Page Layout Example#
Common pattern for page layouts with a container.
Page Layout
Nested Containers#
Containers can be nested for different content widths.
Nested Containers
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xlg" | "2xl" | "full" | "md" | Maximum width based on breakpoints |
| as | ElementType | "div" | Element type to render as |
| render | ReactElement | Function | - | Custom render element or function |
| css | SystemStyleObject | - | Additional Panda CSS styles |
Size Reference#
| Size | Max Width |
|---|---|
xs | Breakpoint xs |
sm | Breakpoint sm |
md | Breakpoint md |
lg | Breakpoint lg |
xlg | Breakpoint xlg |
2xl | Breakpoint 2xl |
full | 100% (no limit) |