OBSIDIANUI : des composants React qui pensent aux agents d’IA
📌 OBSIDIANUI est une bibliothèque de 35+ composants React et TypeScript, construite sur Tailwind CSS v4 et Motion, distribuée via une registry compatible shadcn, et lisible aussi bien par les humains que par les agents d’IA.
Le positionnement se résume en deux mots : « Design Less. Ship Better. » Des curseurs fluides, des effets de survol type spotlight, des images magnétiques, des animations de retournement de pages en 3D. Chaque composant s’installe directement dans votre projet par la commande que vous connaissez déjà :
bash
npx shadcn@latest add "https://www.obsidianui.dev/r/spotlight-card.json"
Pas d’abonnement, pas de dépendance cachée, pas de copie partielle : le code source vous appartient à 100%, il entre dans votre projet, et vous le restylez avec vos classes Tailwind. C’est le contrat shadcn — zéro verrouillage (zero lock-in). Le projet tourne sur Next.js 16, React 19 et TypeScript, et l’interface du site affiche un thème obsidian sombre/clair avec un défilement Lenis très doux.
Ce qui le démarque d’une simple galerie d’effets, c’est la porte d’entrée pour les agents de code. Le projet embarque un serveur MCP natif (npm run mcp), un fichier llms.txt, et des endpoints markdown (Accept: text/markdown). Concrètement : Claude, Cursor, Copilot ou Antigravity peuvent découvrir les composants, leurs props et leurs exemples, et installer directement ce qu’il leur faut sans passer par le navigateur. L’agent demande « un composant de spotlight », le serveur répond, la commande d’installation suit.
Côté contenu : des primitives Radix dans src/components/ui, des blocs et effets interactifs dans src/components/block (canvas, WebGL, shaders, motion), des templates de landing pages complètes comme « Project One », et une documentation MDX. Les nouveautés arrivent à rythme soutenu — un composant par semaine annoncé sur le site, des exemples signatures comme Apple Spotlight, Circle Menu ou Fractal Glass.
Tout est MIT, construit par un seul développeur (@athrix_codes). Pour un intégrateur ou un designer qui veut des micro-interactions soignées sans réinventer la roue, c’est la ressource qu’on garde sous la main. La vraie question quand on l’essaie : jusqu’où personnaliser avant que ça ressemble à votre travail plutôt qu’à une démo ?
Sources
