Container

free

Container keeps the contents of page bands centered with a responsive width constraint.

Store settings

Customer-facing details and checkout preferences.

import Button from '@/components/ui/button';
import Container from '@/components/ui/container';

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Container

pnpm dlx nateui@latest add Container

yarn dlx nateui@latest add Container

API

Container always applies Tailwind's container and mx-auto classes. sm and md add their own maximum widths; lg leaves the base container width unchanged.

Prop	Description	Type	Default
`asElement`	Element or component rendered as the container root.	`React.ElementType`	`'div'`
`size`	Responsive width constraint applied in addition to Tailwind's base `container` class.	`ContainerSize`	`'lg'`
`className`	Additional classes applied to the container root.	`string`	—
`children`	Content aligned inside the container.	`ReactNode`	—
`ref`	Ref forwarded to the rendered root element.	`Ref`	—
`...rest`	Remaining props for `asElement`.	`ComponentPropsWithRef<T>`	—

Types

type ContainerSize = 'sm' | 'md' | 'lg';

sm adds max-w-[800px], md adds max-w-[1200px], and lg adds no extra maximum width beyond Tailwind's container utility.