Jakubantalik / Libraries.dev

# Libraries.dev
**High-crafted UI libraries for AI agents.** Seven React libraries for the effects that make an interface feel alive: a beam of light travelling a card's border, orbs that think while a model works, bot avatars with living faces, shapes that merge like liquid, a glow that rises with your voice, brushed metal that catches the light, and an image loader that dissolves a pixel mosaic into a real photo.
Each one installs from npm and drops into your app as a single component that wraps the element you already have. Your markup keeps its semantics, the effect renders around or behind it, and the whole thing is tuned by props rather than hand-written WebGL.
| Library | What it does | npm | Page |
| --- | --- | --- | --- |
| Border beam | A soft glow that rides the border of a card, button or input | `npm install border-beam` | libraries.dev/beam |
| Thinking orbs | Orbs that think while you wait — nine loading states for AI interfaces | `npm install thinking-orbs` | libraries.dev/orbs |
| Bot avatars | Animated bot avatars with living faces — eighteen glossy shapes, four states, for AI agents | `npm install bot-avatars` | libraries.dev/avatars |
| Gooey | Pieces that merge like goo and morph like jelly while text stays crisp | `npm install liquid-gooey` | libraries.dev/gooey |
| Voice | A glow that rises with your voice from the bottom of a chat input or phone screen | `npm install voice-glow` | libraries.dev/voice |
| Metal | Liquid metal for buttons, icons, text and badges, with reflections and cursor light | `npm install metal-fx` | libraries.dev/metal |
| Image | A loader that becomes the image — a WebGL pixel mosaic that settles into the picture | `npm install img-fx` | libraries.dev/image |
Try each one on libraries.dev: a live preview to play with, the install command, the usage code, and a playground that copies the exact configuration.
## How to use
Every library ships as a prompt. Copy it, paste it into your coding agent, and make it yours — three steps, no setup.
1. **Copy the prompt.** Every library page has a *Copy prompt* button. One paste gives your agent the whole library: its parameter vocabulary and your current settings.
2. **Paste it into your agent.** Drop it into Claude Code, Cursor or Codex. The agent installs the package and wires it in, matched to your theme.
3. **Make it yours.** Open the Studio with Pro for every knob, tune it live and copy the result as props.
Or the plain way:
 [code] 
 [code] 
Each package's README documents its props.
## FAQ
**What do I need?** React 18 or newer. Each library is a standalone package with zero runtime dependencies, except Image, which also needs `three` as a peer dependency.
**Do they work with coding agents?** Yes — that is the point. Every library installs and configures cleanly from Cursor, Claude Code and Codex, and each playground's copy-prompt button hands your agent the library's full parameter vocabulary along with your current settings.
**Light and dark mode?** Bot