AppShell
Estructura de aplicación que combina navegación, encabezado, acciones y superficie principal.
Lesson workspace
Personal information
Browse sections
Introduce yourself
Complete the sentence with your information.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
npx shadcn@latest add https://brutallab.facilito.dev/r/app-shell.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
import { AppShell } from "@/components/layout/app-shell"
export function Dashboard() {
return (
<AppShell
brand={<strong>Study Lab</strong>}
title="Dashboard"
navigation={navigation}
>
Your content
</AppShell>
)
}Variantes
Opciones visuales incluidas en la API oficial del componente.
Lesson workspace
Personal information
Browse sections
Introduce yourself
Complete the sentence with your information.
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| brand | ReactNode | — | Identidad visual del producto. |
| title | string | — | Título de la superficie actual. |
| navigation | AppShellNavItem[] | [] | Elementos del Sidebar. |
| labels | AppShellProps["labels"] | English labels | Traduce el título de navegación, los nombres accesibles y el menú desplegable móvil. |
| actions | ReactNode | — | Acciones del encabezado. |
| sidebarFooter | ReactNode | — | Contenido persistente inferior. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Los enlaces siguen disponibles en móvil mediante un desplegable nativo.
La navegación usa enlaces y estado activo semántico.
Las acciones del encabezado necesitan nombres accesibles; el consumidor añade la región main.