@neynar/ui/llm-docs/container.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# Container

**Type**: component

Container - A responsive layout wrapper with flexible width constraints and consistent padding A fundamental layout component built with class-variance-authority (CVA) that provides consistent horizontal centering, responsive padding, and flexible max-width constraints. Designed to be the primary content wrapper for pages, sections, and layout regions throughout the application. The component automatically applies responsive horizontal padding (px-4 on mobile, px-6 on small screens, px-8 on large screens) and centers content using mx-auto. Five size variants accommodate different content types from optimal reading widths to full-width layouts. Built following shadcn/ui and Tailwind UI patterns for maximum compatibility and consistency with modern React applications and design systems.

## JSX Usage

```jsx
import { Container } from '@neynar/ui';

<Container
  size={value}
  className="value"
  id="value"
  role="value"
  "aria-label"="value"
  "aria-labelledby"="value"
  "aria-describedby"="value"
  "aria-live"={value}
  tabIndex={0}
  onClick={handleClick}
  onFocus={handleFocus}
  onBlur={handleBlur}
  onKeyDown={handleKeyDown}
  onMouseEnter={handleMouseEnter}
  onMouseLeave={handleMouseLeave}
>
  {/* Your content here */}
</Container>
```

## Component Props

### size
- **Type**: `"sm" | "md" | "lg" | "xl" | "full"`
- **Required**: No
- **Description**: No description available

### children
- **Type**: `React.ReactNode`
- **Required**: No
- **Description**: No description available

### className
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### id
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### role
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-label"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-labelledby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-describedby"
- **Type**: `string`
- **Required**: No
- **Description**: No description available

### "aria-live"
- **Type**: `"off" | "polite" | "assertive"`
- **Required**: No
- **Description**: No description available

### tabIndex
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### onClick
- **Type**: `React.MouseEventHandler<HTMLDivElement>`
- **Required**: No
- **Description**: No description available

### onFocus
- **Type**: `React.FocusEventHandler<HTMLDivElement>`
- **Required**: No
- **Description**: No description available

### onBlur
- **Type**: `React.FocusEventHandler<HTMLDivElement>`
- **Required**: No
- **Description**: No description available

### onKeyDown
- **Type**: `React.KeyboardEventHandler<HTMLDivElement>`
- **Required**: No
- **Description**: No description available

### onMouseEnter
- **Type**: `React.MouseEventHandler<HTMLDivElement>`
- **Required**: No
- **Description**: No description available

### onMouseLeave
- **Type**: `React.MouseEventHandler<HTMLDivElement>`
- **Required**: No
- **Description**: No description available

## Examples

### Example 1
```tsx
// Basic usage with default large size (80rem max-width)
<Container>
  <h1>Dashboard Overview</h1>
  <p>Main application content with balanced width constraints</p>
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <Card>Dashboard Widget</Card>
    <Card>Analytics Panel</Card>
    <Card>Recent Activity</Card>
  </div>
</Container>
```
### Example 2
```tsx
// Reading-optimized container for articles and blog posts
<Container size="sm">
  <article className="prose prose-lg max-w-none">
    <h1>The Future of Web Development</h1>
    <p>
      Long-form content with line lengths optimized for readability
      and comfortable reading experience across all device sizes.
    </p>
    <p>
      The small container (48rem) provides the ideal measure for
      typography-focused content and sustained reading.
    </p>
  </article>
</Container>
```
### Example 3
```tsx
// Medium container for forms and structured layouts
<Container size="md">
  <div className="space-y-8">
    <div className="text-center">
      <h2>Account Settings</h2>
      <p>Manage your account preferences and profile information</p>
    </div>
    <form className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Input label="First Name" />
        <Input label="Last Name" />
      </div>
      <Input label="Email Address" type="email" />
      <Button type="submit" className="w-full">Update Profile</Button>
    </form>
  </div>
</Container>
```
### Example 4
```tsx
// Full-width container for complex layouts and hero sections
<Container size="full">
  <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
    <div className="text-center space-y-6">
      <h1 className="text-4xl md:text-6xl font-bold">
        Welcome to Our Platform
      </h1>
      <p className="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto">
        Edge-to-edge hero section with full viewport width
      </p>
      <Button size="lg" variant="secondary">
        Get Started
      </Button>
    </div>
  </div>
</Container>
```
### Example 5
```tsx
// Extra-large container for data-heavy interfaces
<Container size="xl" className="py-8">
  <div className="space-y-6">
    <div className="flex justify-between items-center">
      <h1 className="text-3xl font-bold">Analytics Dashboard</h1>
      <Button variant="outline">Export Data</Button>
    </div>
    // Wide data table that needs maximum available width
    <DataTable
      columns={analyticsColumns}
      data={analyticsData}
      className="min-w-[1200px]"
    />
    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
      <MetricCard />
      <MetricCard />
      <MetricCard />
      <MetricCard />
    </div>
  </div>
</Container>
```
### Example 6
```tsx
// Advanced usage with custom styling and ARIA landmarks
<Container
  size="lg"
  className="min-h-screen py-12 bg-gray-50 dark:bg-gray-900"
  role="main"
  aria-label="Application content"
>
  <div className="space-y-10">
    <header className="text-center space-y-4">
      <Badge variant="secondary">New Feature</Badge>
      <h1 className="text-4xl font-bold tracking-tight">
        Product Announcement
      </h1>
      <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
        Discover the latest improvements to our platform
      </p>
    </header>
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <FeatureCard />
      <FeatureCard />
      <FeatureCard />
    </div>
  </div>
</Container>
```