RARE UI : des composants React animés à poser d’une commande
⏱️ Temps de lecture estimé : 3 minutes
📌 RARE UI est une collection open source de composants React animés, livrée comme un registry shadcn. Vous choisissez un composant sur le site, vous l’installez avec une ligne de commande, et son code atterrit directement dans votre projet — pas de paquet à suivre, fonctionnalité et design restent entièrement à vous.
Le projet, porté par le développeur Swami Malode, répond à une frustration ordinaire. Pour une micro-animation soignée — une sidebar bondissante, un compteur à roue, une cloche de notification — on finit souvent avec un bout de code tronqué depuis un billet de blog. Ici, chaque composant est un fichier TypeScript copié dans components/ui, qui se suffit à lui-même et se retouche sans crainte.
J’ai commencé par le dossier animé : ses cartes s’écartent au survol puis se soulèvent au clic, avec une languette inclinée en 3D. Deux props suffisent, une couleur et une taille (sm, md, lg). Le site montre chaque composant en action avec ses options documentées à côté, ce qui aide à décider avant d’installer. La démo officielle ci-dessous donne une bonne idée du rendu.
La galerie touche plusieurs registres. L’affichage avec l’orb fluide en WebGL, le bloc de code dont le thème naît d’une seule couleur, ou la heatmap d’activité GitHub qui classe vos dépôts. La navigation avec les barres latérales à proximité ou à amorti. La saisie avec le sélecteur de durée au fluide gooey et l’OTP dont les chiffres roulent derrière un curseur. J’en compte une vingtaine, régulièrement enrichis — les derniers arrivés couvrent un menu gooey, une section révélée en grille et une sidebar à rail.
Les animations reposent sur Motion, et le respect de prefers-reduced-motion est intégré : pour qui le demande, les mouvements se calment. Les points clés :
- 📂 Le composant est copié dans votre code, aucune dépendance à maintenir
- 🧲 Une commande suffit :
npx shadcn@latest add swamimalode07/rare-ui/fluid-orb - 💤
prefers-reduced-motionrespecté - 🎨 Props simples et ensemble restylable librement
Ce que je retiens surtout, c’est l’approche, plus que tel composant précis. Vous installez, vous possédez. Le registre livre du code source dans votre arborescence, vous redéfinissez les couleurs, la physique du ressort, le comportement. C’est l’inverse d’une dépendance boîte noire, et ça change ce qu’on ose ajouter à une interface.
À noter sur la licence avant de foncer : le projet est gratuit, les composants se réutilisent en personnel comme en commercial, mais la revente du composant lui-même est exclue et un lien visible vers le site est demandé. La licence exige un geste, pas un paiement — sur un créneau où tant de kits verrouillent l’usage, ça se remarque.
Sources
