YA Skeleton
Componente de placeholder animado para estados de carga, con tipos línea y tarjeta
El componente Skeleton proporciona placeholders visuales animados mientras se carga el contenido. Disponible en dos tipos: línea (con avatar) y tarjeta (con área de contenido).
Quick Start
pnpm dlx shadcn@latest add @yavendio/ya-skeletonnpx shadcn@latest add @yavendio/ya-skeletonyarn dlx shadcn@latest add @yavendio/ya-skeletonimport { YaSkeleton } from '@/components/ui/ya-skeleton'
export default function Example() {
return <YaSkeleton type="line" />
}Types
El componente soporta dos tipos principales de skeleton.
Line (default)
Card
| Type | Descripción |
|---|---|
line | Avatar circular + dos líneas de texto (default) |
card | Área rectangular grande + dos líneas de texto |
<YaSkeleton type="line" />
<YaSkeleton type="card" />States
El componente soporta dos estados de visibilidad. state="02" aplica opacidad reducida, útil para jerarquía visual en listas de carga.
State 01 (default)
State 02 (attenuated)
| State | Descripción |
|---|---|
01 | Opacidad completa (default) |
02 | Opacidad reducida (50%) |
<YaSkeleton type="line" state="01" />
<YaSkeleton type="line" state="02" />Line Type
Ideal para listas de usuarios, comentarios o cualquier contenido con avatar.
<YaSkeleton type="line" />
<YaSkeleton type="line" />
<YaSkeleton type="line" />Card Type
Perfecto para cards de contenido, posts de blog o productos.
<YaSkeleton type="card" />
<YaSkeleton type="card" />Primitives
Además del componente compuesto, puedes usar los primitivos individuales para composiciones personalizadas.
Avatar
Lines
Card
import {
YaSkeletonAvatar,
YaSkeletonLine,
YaSkeletonCard,
} from '@/components/ui/ya-skeleton'
// Avatar (circle)
<YaSkeletonAvatar />
<YaSkeletonAvatar className="size-12" />
// Lines
<YaSkeletonLine />
<YaSkeletonLine width="partial" />
// Card area
<YaSkeletonCard />Custom Composition
Combina los primitivos para crear layouts de loading personalizados.
<div className="flex w-full max-w-sm gap-4 items-start">
<YaSkeletonAvatar className="size-10" />
<div className="flex-1 space-y-2">
<YaSkeletonLine className="w-1/3 h-4" />
<YaSkeletonLine className="w-full h-3" />
<YaSkeletonLine className="w-2/3 h-3" />
</div>
</div>Props
YaSkeleton
| Prop | Type | Default | Descripción |
|---|---|---|---|
type | 'line' | 'card' | 'line' | Tipo de layout del skeleton |
state | '01' | '02' | '01' | Estado de visibilidad |
className | string | - | Clases adicionales |
Extiende todos los atributos estándar de div.
YaSkeletonAvatar
| Prop | Type | Default | Descripción |
|---|---|---|---|
className | string | - | Clases adicionales |
Tamaño por defecto: 48x48px, bordes redondeados (pill).
YaSkeletonLine
| Prop | Type | Default | Descripción |
|---|---|---|---|
width | 'full' | 'partial' | 'full' | Ancho de la línea |
className | string | - | Clases adicionales |
Altura por defecto: 16px.
YaSkeletonCard
| Prop | Type | Default | Descripción |
|---|---|---|---|
className | string | - | Clases adicionales |
Altura por defecto: 125px.