🎨

UI Knihovna

Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.

Kostry (Skeletons)

Zástupné načítací animace imitující rozložení obsahu.

Kostra karty

Skeleton.tsxLanguage: tsx
export function CardSkeleton() { return ( <div className="bg-surface border border-border rounded-2xl p-6 max-w-sm w-full"> <div className="w-full h-48 bg-black/5 rounded-2xl mb-6 animate-pulse"></div> <div className="space-y-3"> <div className="h-6 w-3/4 bg-black/5 rounded-full animate-pulse"></div> <div className="h-4 w-full bg-black/5 rounded-full animate-pulse"></div> <div className="h-4 w-5/6 bg-black/5 rounded-full animate-pulse"></div> </div> <div className="mt-8 flex items-center gap-4 border-t border-border pt-6"> <div className="w-12 h-12 rounded-full bg-black/5 animate-pulse"></div> <div className="space-y-2 flex-1"> <div className="h-4 w-1/3 bg-black/5 rounded-full animate-pulse"></div> <div className="h-3 w-1/4 bg-black/5 rounded-full animate-pulse"></div> </div> </div> </div> ); }

Kostra textu

Skeleton.tsxLanguage: tsx
export function TextSkeleton() { return ( <div className="max-w-xl w-full space-y-4"> <div className="h-8 w-1/2 bg-black/5 rounded-full animate-pulse mb-8"></div> <div className="space-y-2.5"> <div className="h-4 w-full bg-black/5 rounded-full animate-pulse"></div> <div className="h-4 w-full bg-black/5 rounded-full animate-pulse"></div> <div className="h-4 w-5/6 bg-black/5 rounded-full animate-pulse"></div> <div className="h-4 w-full bg-black/5 rounded-full animate-pulse"></div> <div className="h-4 w-3/4 bg-black/5 rounded-full animate-pulse"></div> </div> </div> ); }