Layout

Container

Constrains content width and centers it with responsive horizontal padding.

margin

Container

max-w: 1200px

px-4→sm:px-6→md:px-8

margin

Props

Prop	Type	Default	Description
`maxWidth`	`number`	`1200`	Maximum width in pixels
`useSafeArea`	`boolean`	`true`	Wrap in SafeAreaView
`className`	`string`	`—`	NativeWind classes
`children`	`ReactNode`	`—`	Container content

Usage

// Wrap your screen content
import { Container } from '@/components/ui/container';

// Basic usage
<Container>
  <Header />
  <ScrollView>
    <Content />
  </ScrollView>
</Container>

// Custom max width, no safe area
<Container maxWidth={960} useSafeArea={false}>
  <NarrowContent />
</Container>

Installation

$npx kachindo-ui add container