Reddot UI Library

Docs
Skeleton

Skeleton

Use to show a placeholder while content is loading.

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/skeleton.json

Utilisation

Importez le composant Skeleton :

import { Skeleton } from "@/components/ui/skeleton"

Exemple basique :

<Skeleton className="h-[20px] w-[100px] rounded-full" />

Exemples

Skeleton basique

export function SkeletonDemo() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Skeleton de carte

export function SkeletonCard() {
  return (
    <div className="flex flex-col space-y-3">
      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[250px]" />
        <Skeleton className="h-4 w-[200px]" />
      </div>
    </div>
  )
}

Skeleton de profil

export function SkeletonProfile() {
  return (
    <div className="flex items-center space-x-4">
      <Skeleton className="h-12 w-12 rounded-full" />
      <div className="space-y-2">
        <Skeleton className="h-4 w-[200px]" />
        <Skeleton className="h-4 w-[160px]" />
      </div>
    </div>
  )
}

Skeleton de liste

export function SkeletonList() {
  return (
    <div className="space-y-2">
      {[...Array(5)].map((_, i) => (
        <div key={i} className="flex items-center space-x-4">
          <Skeleton className="h-6 w-6 rounded" />
          <Skeleton className="h-4 w-[200px]" />
        </div>
      ))}
    </div>
  )
}

API Reference

Skeleton

Affiche un placeholder pendant le chargement du contenu.

PropTypeDefaultDescription
classNamestring-Classes CSS pour personnaliser l'apparence du skeleton.

Conseils d'utilisation

Tailles communes

  • Avatar : h-12 w-12 rounded-full
  • Texte court : h-4 w-[100px]
  • Texte moyen : h-4 w-[200px]
  • Texte long : h-4 w-[300px]
  • Image : h-[200px] w-full rounded-md
  • Bouton : h-10 w-[100px] rounded-md

Bonnes pratiques

  1. Respectez les proportions : Les skeletons doivent avoir des dimensions similaires au contenu final
  2. Utilisez l'espacement approprié : Maintenez le même espacement que votre contenu réel
  3. Animation cohérente : Le skeleton inclut une animation de pulsation par défaut
  4. États de chargement : Utilisez des skeletons pour tous les éléments qui prennent du temps à charger