# AppShellContent

> El contenedor de una página de panel: ancho máximo, márgenes y separación, iguales en toda la app.

```tsx
import { AppShellContent } from "sebs7n-ui/app-shell-content"
```

Sin `"use client"`: sirve en un Server Component.

## Ejemplos

### El contenedor de una página

Ancho máximo, márgenes y separación iguales en toda la app.

```tsx
import { AppShellContent } from "sebs7n-ui/app-shell-content"
import { Card, CardContent } from "sebs7n-ui/card"
import { PageHeader, PageHeaderDescription, PageHeaderTitle } from "sebs7n-ui/page-header"

function Basico() {
  return (
    <div className="w-full rounded-xl border border-gray-400 bg-background">
      <AppShellContent>
        <PageHeader>
          <PageHeaderTitle>Clientes</PageHeaderTitle>
          <PageHeaderDescription>Todo lo que factura Acme.</PageHeaderDescription>
        </PageHeader>
        <Card>
          <CardContent>El contenido de la página, con el `gap-6` del contenedor.</CardContent>
        </Card>
      </AppShellContent>
    </div>
  )
}
```

## Props

### AppShellContent

Hereda las props de `<div>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `size` | `"default" \| "wide" \| "full"` | `"default"` | default = max-w-7xl (1280px), wide = 1600px (tablas anchas), full = sin máximo. |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| — | No es interactivo. |

## Accesibilidad

- Sin `"use client"`: sirve en un Server Component, así la página no arrastra JS de más.

## Reglas de uso

- Hijo directo de `AppShell`, uno por página.
- `size="wide"` (1600px) para tablas anchas; `size="full"` sin máximo, para un mapa o un canvas.
- No le pongas padding extra: el que trae es el del sistema.

## Relacionados

[app-shell](/docs/components/app-shell.md) · [page-header](/docs/components/page-header.md)