libraries.dev

# Libraries.dev **Bibliothèques UI haut de gamme pour agents IA.** Sept bibliothèques React pour les effets qui font qu'une interface semble vivante : un faisceau de lumière qui parcourt la bordure d'une carte, des orbes qui réfléchissent pendant qu'un modèle travaille, des avatars de bot aux visages vivants, des formes qui fusionnent comme un liquide, une lueur qui monte avec votre voix, un métal brossé qui capte la lumière, et un chargeur d'images qui dissout une mosaïque de pixels en une vraie photo. Chacune s'installe depuis npm et s'intègre à votre application comme un composant unique qui enveloppe l'élément que vous avez déjà. Votre balisage conserve sa sémantique, l'effet se rend autour ou derrière lui, et l'ensemble se règle par props plutôt que par du WebGL écrit à la main. | Bibliothèque | Ce qu'elle fait | npm | Page | | --- | --- | --- | --- | | [Border beam](packages/border-beam) | Une lueur douce qui parcourt la bordure d'une carte, d'un bouton ou d'un champ | `npm install border-beam` | [libraries.dev/beam](https://libraries.dev/beam) | | [Thinking orbs](packages/thinking-orbs) | Des orbes qui réfléchissent pendant l'attente — neuf états de chargement pour les interfaces IA | `npm install thinking-orbs` | [libraries.dev/orbs](https://libraries.dev/orbs) | | [Bot avatars](packages/bot-avatars) | Avatars de bot animés aux visages vivants — dix-huit formes brillantes, quatre états, pour agents IA | `npm install bot-avatars` | [libraries.dev/avatars](https://libraries.dev/avatars) | | [Gooey](packages/liquid-gooey) | Des pièces qui fusionnent comme du goo et se transforment comme de la gelée, tandis que le texte reste net | `npm install liquid-gooey` | [libraries.dev/gooey](https://libraries.dev/gooey) | | [Voice](packages/voice-glow) | Une lueur qui monte avec votre voix depuis le bas d'un champ de saisie de chat ou d'un écran de téléphone | `npm install voice-glow` | [libraries.dev/voice](https://libraries.dev/voice) | | [Metal](packages/metal-fx) | Du métal liquide pour boutons, icônes, textes et badges, avec reflets et lumière du curseur | `npm install metal-fx` | [libraries.dev/metal](https://libraries.dev/metal) | | [Image](packages/img-fx) | Un chargeur qui devient l'image — une mosaïque de pixels WebGL qui se stabilise en image | `npm install img-fx` | [libraries.dev/image](https://libraries.dev/image) | Essayez chacune sur [libraries.dev](https://libraries.dev) : un aperçu en direct avec lequel jouer, la commande d'installation, le code d'utilisation, et un playground qui copie la configuration exacte. ## Comment l'utiliser Chaque bibliothèque est livrée sous forme de prompt. Copiez-le, collez-le dans votre agent de codage, et faites-le vôtre — trois étapes, aucune configuration. 1. **Copiez le prompt.** Chaque page de bibliothèque a un bouton *Copy prompt*. Un seul collage donne à votre agent toute la bibliothèque : son vocabulaire de paramètres et vos réglages actuels. 2. **Collez-le dans votre agent.** Déposez-le dans Claude Code, Cursor ou Codex. L'agent installe le paquet et le câble, adapté à votre thème. 3. **Faites-le vôtre.** Ouvrez le [Studio](https://libraries.dev/studio.html) avec Pro pour tous les réglages, ajustez en direct et copiez le résultat sous forme de props. Ou de la manière simple : ```bash npm install border-beam # ou thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx ``` ```tsx import { BorderBeam } from "border-beam"; <BorderBeam> <button>Get started</button> </BorderBeam> ``` Le README de chaque paquet documente ses props. ## FAQ **De quoi ai-je besoin ?** React 18 ou plus récent. Chaque bibliothèque est un paquet autonome sans dépendance d'exécution, sauf Image, qui nécessite aussi `three` comme dépendance homologue. **Fonctionnent-elles avec les agents de codage ?** Oui — c'est tout l'intérêt. Chaque bibliothèque s'installe et se configure proprement depuis Cursor, Claude Code et Codex, et le bouton de copie de prompt de chaque playground transmet à votre agent le vocabulaire complet des paramètres de la bibliothèque ainsi que vos réglages actuels. **Mode clair et sombre ?** Les deux, détectés pour vous. Le `theme="auto"` par défaut résout un attribut `data-theme` ou une classe `dark` sur un ancêtre, puis se rabat sur `prefers-color-scheme`, en se mettant à jour en direct quand l'un ou l'autre change. Passez `theme="dark"` ou `theme="light"` pour en fixer un. **Que sont Pro et le Studio ?** Une seule offre pour toutes les bibliothèques. Pro débloque le [Studio](https://libraries.dev/studio.html) — une personnalisation approfondie, par bibliothèque, au-delà des playgrounds publics, avec export de la configuration exacte — plus les presets Pro et chaque future bibliothèque et mise à jour. Voir [tarifs](https://libraries.dev/pro.html). **Projets commerciaux ?** Les bibliothèques sont sous MIT — utilisez-les partout, y compris dans des travaux commerciaux. Le contenu Pro (exports du Studio, presets et recettes Pro) vous est licencié, à vous ou à votre équipe, selon l'offre que vous achetez, pour un nombre illimité de projets. ## Travailler dans ce dépôt npm workspaces : `packages/` contient les bibliothèques publiées (un dossier par paquet npm, chacun avec son propre README et LICENSE), `sites/` les sites de démonstration — `sites/home` est libraries.dev. ```bash npm install npm run build:site-home # chaque bibliothèque + libraries.dev, comme le fait la CI npm run dev -w @sites/home # libraries.dev avec chaque page et le Studio npm run typecheck # chaque workspace ``` Le site d'accueil importe les paquets construits, donc construisez une bibliothèque (`npm run build:beam`, `build:orbs`, `build:gooey`, `build:voice`, `build:metal`, `build:image`) avant sa page ou son bench. Les démos autonomes (`@sites/beam`, `@sites/gooey`, `@sites/orbs`) aliasent leur bibliothèque vers sa source et rechargent à chaud sans reconstruction. ## Publication La publication se fait par paquet (`publish.yml`, `npm publish -w <package>`) : lancez le workflow à la main avec le nom du paquet, ou publiez une release GitHub dont le tag est `<package>@<version>` (`voice-glow@0.2.0`). Une version que le registre possède déjà est ignorée. ## Déploiements Les deux sites sont hébergés séparément, car GitHub Pages sert un seul domaine personnalisé par dépôt : - **beam.jakubantalik.com** — GitHub Pages via `.github/workflows/deploy.yml` ; la liaison de domaine se trouve dans `sites/beam/public/CNAME`. - **gooey.jakubantalik.com** — Cloudflare Pages, construit depuis ce dépôt avec `npm run build:site-gooey`, sortie `sites/gooey/dist`. - **orbs.jakubantalik.com** — Cloudflare Pages, construit avec `npm run build:site-orbs`, sortie `sites/orbs/dist`. - **libraries.dev** — Cloudflare Pages, déployé par `.github/workflows/deploy-home.yml` à chaque push sur `main` (`npm run build:site-home`, sortie `sites/home/dist`). Le site principal : landing, une page et un bench Studio par bibliothèque, tarifs Pro, pages de compte et mentions légales. Son backend est `api.libraries.dev`, un Worker dans le dépôt privé `libraries-pro` — voir `sites/home/README.md`. `.node-version` fixe Node 20 pour les builds Cloudflare, en correspondance avec la version utilisée par les workflows GitHub ; la valeur par défaut de Cloudflare est plus ancienne. Le **Retry deployment** de Cloudflare rejoue le même commit plutôt que de récupérer la pointe de la branche, donc un build qui a échoué sur un commit obsolète continue d'échouer. Poussez un nouveau commit pour en obtenir un frais. Seul le site beam porte un `public/CNAME` ; ce fichier est un mécanisme de GitHub Pages. Les sites hébergés sur Cloudflare lient leur domaine dans le projet Pages à la place, et l'enregistrement DNS lui-même vit chez le registrar (inetadmin), pas chez Cloudflare — `jakubantalik.com` n'est pas sur les serveurs de noms de Cloudflare. `thinking-orbs` est arrivé par `git subtree`, donc son historique complet est dans ce dépôt — mais ces commits touchaient `src/…`, pas `packages/thinking-orbs/src/…`. `git log -- packages/thinking-orbs` s'arrête donc au merge. Pour lire le véritable historique, loguez depuis le commit que le merge nomme : ```bash git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift git log --follow packages/thinking-orbs/src/index.ts ``` `thinking-orbs` porte aussi des ports natifs sous [`packages/thinking-orbs/ports`](packages/thinking-orbs/ports) — un paquet React Native et un paquet SwiftUI, maintenus en phase avec le moteur de rendu web par les vecteurs de référence dans `spec/`. Aucun n'est encore publié.