Sidebar

Sidebar forma parte del apartado «Navegación» del kit. Tabs, breadcrumbs, navbars, sidebars y cabeceras para estructurar la app.

Instalación#

bash

pnpm add @tsukira/ui

tsx

import { Sidebar } from "@tsukira/ui"; export function Ejemplo() {  return <Sidebar />;}

Los ejemplos detallados de Sidebar están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

SidebarPropsextends HTMLAttributes<HTMLElement>

Prop	Tipo	Default	Descripción
`width`	`number`	—	Ancho cuando está expandida (px).
`variant`	`'floating' \| 'flush'`	—	Variante de presentación.
`collapsed`	`boolean`	—	Modo colapsado (solo iconos).

SidebarBrandPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>

Prop	Tipo	Default	Descripción
`logo`	`ReactNode`	—	—
`title`	`ReactNode`	—	—
`subtitle`	`ReactNode`	—	—

SidebarSectionPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`label`	`ReactNode`	—	—

SidebarItemPropsextends AnchorHTMLAttributes<HTMLAnchorElement>

Prop	Tipo	Default	Descripción
`icon`	`ReactNode`	—	Icono a la izquierda.
`active`	`boolean`	—	Marcado como activo.
`badge`	`ReactNode`	—	Badge a la derecha (texto/numérico).
`as`	`'a' \| 'button'`	—	Renderiza como botón si no hay href.

SidebarSubItemPropsextends AnchorHTMLAttributes<HTMLAnchorElement>

Prop	Tipo	Default	Descripción
`active`	`boolean`	—	Marcado como activo.
`badge`	`ReactNode`	—	Badge a la derecha.

SidebarItemGroupPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>

Prop	Tipo	Default	Descripción
`icon`	`ReactNode`	—	Icono a la izquierda (mismo formato que SidebarItem).
`label`*	`ReactNode`	—	Texto del item "padre".
`badge`	`ReactNode`	—	Badge en la fila del padre.
`open`	`boolean`	—	Estado abierto (controlado).
`onOpenChange`	`((open: boolean) => void)`	—	Cambio del estado abierto.
`defaultOpen`	`boolean`	—	Abierto por defecto (uncontrolled).
`children`*	`ReactNode`	—	Sub-items dentro (recomendado: <SidebarSubItem />).