PageHeader
PageHeader forma parte del apartado «Navegación» del kit. Tabs, breadcrumbs, navbars, sidebars y cabeceras para estructurar la app.
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { PageHeader } from "@tsukira/ui"; export function Ejemplo() { return <PageHeader />;}Ejemplos#
Los ejemplos detallados de PageHeader están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en NavegaciónAPI#
PageHeaderPropsextends Omit<HTMLAttributes<HTMLElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
breadcrumb | ReactNode | — | Breadcrumb arriba del título (renderea un slot, ideal: `<Breadcrumb>...`). |
eyebrow | ReactNode | — | Eyebrow opcional sobre el título. |
title* | ReactNode | — | Título principal (h1). |
description | ReactNode | — | Descripción debajo del título. |
actions | ReactNode | — | Acciones a la derecha (botones, etc.). En mobile se apilan abajo automáticamente. |
size | 'sm' | 'md' | 'lg' | `'lg'` — PageHeader suele ser el título de página | Tamaño visual. Default `'lg'` — PageHeader suele ser el título de página. |
divider | boolean | — | Mostrar borde inferior. |