300 composants · registre shadcn · licence MIT

Icônes animées pour shadcn/ui

Toutes les icônes useAnimations sont disponibles dans un registre shadcn. Une seule commande de la CLI ajoute à votre projet un composant React typé, avec l’interaction au survol, au clic ou en boucle pour laquelle l’icône a été conçue, la prise en charge de la réduction des animations et des couleurs qui suivent votre thème. Le code atterrit dans votre dépôt, comme n’importe quel autre composant shadcn/ui.

Ajouter une icône

Lancez la CLI shadcn avec l’URL de l’icône dans le registre :

npx shadcn@latest add https://useanimations.com/r/checkmark.json

import { AnimatedCheckmark } from '@/components/animations/checkmark';

<AnimatedCheckmark size={24} />

Le composant s’appelle Animated + l’id de l’icône en PascalCase (check-box → AnimatedCheckBox) et se place dans components/animations/<id>.tsx. La CLI ajoute aussi le wrapper partagé components/use-animation.tsx et installe react-useanimations, qui embarque son propre lecteur : pas besoin de lottie-web.

Des noms courts avec un namespace de registre

Ajoutez une fois le registre à components.json, puis ajoutez les icônes par leur nom, plusieurs à la fois :

{
  "registries": {
    "@useanimations": "https://useanimations.com/r/{name}.json"
  }
}

npx shadcn@latest add @useanimations/menu @useanimations/heart @useanimations/loading

L’index du registre, /r/registry.json, liste chaque élément avec son titre, sa catégorie et son interaction.

Dans un Button shadcn

Les composants acceptent les mêmes props que UseAnimations. Pour une bascule comme l’icône de menu, passez active et gardez l’état dans votre bouton ; l’icône s’anime chaque fois qu’il change :

npx shadcn@latest add https://useanimations.com/r/menu.json

"use client"

import { useState } from "react"
import { AnimatedMenu } from "@/components/animations/menu"
import { Button } from "@/components/ui/button"

export function MenuToggle() {
  const [open, setOpen] = useState(false)
  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label={open ? "Fermer le menu" : "Ouvrir le menu"}
      aria-expanded={open}
      onClick={() => setOpen(!open)}
    >
      <AnimatedMenu size={20} active={open} />
    </Button>
  )
}

Les icônes suivent la couleur du texte : text-primary ou text-muted-foreground suffisent à les recolorer, et le mode sombre ne demande rien de plus. D’autres props et exemples sont dans la documentation.

Icônes populaires pour shadcn/ui

Les 300 icônes →

La page de chaque icône indique sa commande shadcn.

Questions fréquentes

Les icônes animées shadcn/ui sont-elles gratuites ?

Oui. Les 300 icônes et le code des composants sont sous licence MIT, pour vos projets personnels et commerciaux. Le registre ne demande ni compte ni clé d’API.

Qu’est-ce que la CLI shadcn ajoute à mon projet ?

Le composant de l’icône dans components/animations/<id>.tsx, le wrapper partagé du lecteur UseAnimation dans components/use-animation.tsx (une seule fois, en tant que dépendance du registre) et react-useanimations@^3.1.1 depuis npm. lottie-web n’est pas nécessaire : le package embarque son propre lecteur de 8 kB.

Les composants fonctionnent-ils avec les server components de Next.js ?

Oui. Les composants sont marqués "use client" et ne dessinent l’animation que dans le navigateur : vous pouvez les afficher depuis des server components et des pages sans import dynamique ni ssr: false.

Puis-je modifier l’apparence et le mouvement des icônes ?

Le code vous appartient, il est dans votre dépôt. Les composants acceptent les props de UseAnimations : size, strokeColor, fillColor, interaction, active, autoplay, loop et speed. Les icônes suivent la couleur du texte : des classes Tailwind comme text-primary ou text-muted-foreground suffisent à les recolorer.