DesignAnalytika
⌘K
    • Přehled
  • Tokens

    • Barvy
    • Typografie
    • Tvary & pohyb
    • Motion
    • Ikony
    • Glass
  • Primitivy

    • Logo
    • Button / CTA
    • Badge
    • Price & PriceTag
    • TrustStars
    • Chip / UspTag
    • Avatar
    • Eyebrow & Num
    • Separator
    • Skeleton
    • Toast
    • Cards & Containers
    • Form controls
  • Komponenty

    • ProductCard

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
PropTypDefaultPoužití
shape"text" | "rect" | "circle""rect"Zaoblení + výchozí výška
classNamestring—Rozměry (h-* / w-* / size-*)

<SkeletonText>

components/ui/skeleton.tsx
PropTypDefaultPoužití
linesnumber3Počet řádků
classNamestring—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.