Skeleton
Shimmer placeholder při načítání. Sage shimmer, honoruje reduced-motion. Rozměry dej přes className — drž tvar reálného obsahu, ať layout neposkočí.
3
Tvary
text · rect · circle
sage
Shimmer
200% sweep
a11y
Reduced
vypne animaci
cls
Rozměry
přes className
Tvary
text · rect · circle. Rozměry dej přes className.
Textový blok
SkeletonText — n řádků, poslední kratší.
Kompozice — karta
Skeleton drží tvar reálné produktové karty (obrázek + název + cena).
Props & pravidla
<Skeleton>
components/ui/skeleton.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| shape | "text" | "rect" | "circle" | "rect" | Zaoblení + výchozí výška |
| className | string | — | Rozměry (h-* / w-* / size-*) |
<SkeletonText>
components/ui/skeleton.tsx| Prop | Typ | Default | Použití |
|---|---|---|---|
| lines | number | 3 | Počet řádků |
| className | string | — | Wrapper |
Skeleton kopíruje rozměry reálného obsahu, ať při dotažení dat layout neposkočí. Shimmer se vypne při
prefers-reduced-motion.