@neynar/ui/docs/llm/components/layout.md

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

# Layout Components

## Container
Responsive container with max-width constraints and padding.

```tsx
import { Container } from "@neynar/ui";

<Container size="sm">Content</Container>
<Container size="md" className="py-8">Main content area</Container>
<Container size="lg">Wide layout</Container>
```

## Stack
Vertical and horizontal spacing utility for consistent layouts.

```tsx
import { Stack } from "@neynar/ui";

<Stack direction="vertical" spacing="md">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

<Stack direction="horizontal" spacing="sm" align="center">
  <button>Action</button>
  <span>Label</span>
</Stack>
```

## Separator
Visual divider for content sections.

```tsx
import { Separator } from "@neynar/ui";

<div>
  <p>Section 1</p>
  <Separator className="my-4" />
  <p>Section 2</p>
</div>

<Separator orientation="vertical" className="h-6 mx-2" />
```

## AspectRatio
Maintain consistent aspect ratios for media and containers.

```tsx
import { AspectRatio } from "@neynar/ui";

<AspectRatio ratio={16 / 9}>
  <img src="/image.jpg" alt="Video thumbnail" className="object-cover" />
</AspectRatio>

<AspectRatio ratio={1} className="bg-muted">
  <div className="flex items-center justify-center">1:1 Square</div>
</AspectRatio>
```