Skeleton

Placeholder animado que ocupa el espacio de contenido mientras carga. Tres formas primitivas (rect, circle, text) y patrones compuestos listos para usar: SkeletonCard, SkeletonRow, SkeletonListItem y SkeletonMetricCard.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Skeleton } from "@tsukira/ui"; <Skeleton shape="circle" width={48} height={48} /><Skeleton shape="text" lines={3} /><Skeleton shape="rect" width="100%" height={64} />

Ejemplos#

Playground

cambia las props y el código se regenera

shape

width

height

lines

noAnimation

Inactivo

coverAspectRatio

descriptionLines

showFooter

Inactivo

columns

withAvatar

Inactivo

showDelta

Inactivo

avatarSize

children

Inactivo

fallback

Formas primitivas

rect · circle · text

Sin animación

noAnimation — para previews estáticas o tests

Patrones compuestos

SkeletonCard · SkeletonRow · SkeletonListItem · SkeletonMetricCard

Fusión: tarjeta de perfil en carga

Skeleton primitivos componen un placeholder de perfil completo dentro de Card

Perfil de usuario

Cargando…

Fusión: filas de tabla en estado de carga

SkeletonRow reemplaza las filas reales mientras se obtienen datos del servidor

Usuario	Equipo	Partidas	Puntuación

Fusión: lista de actividad reciente en carga

SkeletonListItem dentro de Card simula un feed de actividad cargando

Actividad

Cargando actividad reciente…

Esqueletizador automático: Skeleton.Of

Envuelve cualquier bloque de HTML o componentes de Kimi y los convertirá automáticamente en placeholders en carga

Estado: Cargando (Esqueleto)

API#

SkeletonPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`shape`	`'rect' \| 'circle' \| 'text'`	'rect'	Forma. Default 'rect'.
`width`	`number \| string`	—	Ancho. Acepta número (px) o string ('100%', '12rem').
`height`	`number \| string`	depende de shape: rect=20px, circle=40px, text=1em	Alto. Default depende de shape: rect=20px, circle=40px, text=1em.
`lines`	`number`	1	Para text: cantidad de líneas (genera array de skeletons stacked). Default 1.
`noAnimation`	`boolean`	—	Desactivar animación.

SkeletonCardPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`coverAspectRatio`	`string`	—	Aspect ratio del cover (e.g., '16/9'). Si no se pasa, no se renderea cover.
`descriptionLines`	`number`	2	Líneas de descripción debajo del título. Default 2.
`showFooter`	`boolean`	true	Mostrar footer (botón placeholder). Default true.

SkeletonRowPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`columns`	`number`	4	Cantidad de columnas. Default 4.
`withAvatar`	`boolean`	false	Mostrar avatar circular en la primera columna. Default false.

SkeletonMetricCardPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`showDelta`	`boolean`	true	Mostrar línea de delta debajo del valor. Default true.

SkeletonListItemPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`avatarSize`	`number`	40	Tamaño del avatar (px). Default 40.
`lines`	`number`	1	Líneas de texto debajo del título. Default 1.

SkeletonOfProps

Prop	Tipo	Default	Descripción
`children`	`ReactNode`	—	—
`loading`	`boolean`	—	—
`fallback`	`ReactNode`	—	—