Libraries.dev README

The project's README from github.com/Jakubantalik/Libraries.dev. As one markdown file: README.md.

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:

npm install border-beam   # or thinking-orbs, bot-avatars, liquid-gooey, voice-glow, metal-fx, img-fx

import { BorderBeam } from "border-beam";

<BorderBeam>
  <button>Get started</button>
</BorderBeam>

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? Both, detected for you. The default theme="auto" resolves a data-theme attribute or dark class on an ancestor, then falls back to prefers-color-scheme, updating live when either changes. Pass theme="dark" or theme="light" to pin one.

What are Pro and the Studio? One plan across every library. Pro unlocks the Studio — deep, per-library customization beyond the public playgrounds, with export of the exact configuration — plus Pro presets and every future library and update. See pricing.

Commercial projects? The libraries are MIT — use them anywhere, including commercial work. Pro content (Studio exports, Pro presets and recipes) is licensed to you or your team under the plan you buy, for unlimited projects.

Working in this repo

npm workspaces: packages/ holds the published libraries (one folder per npm package, each with its own README and LICENSE), sites/ the demo sites — sites/home is libraries.dev.

npm install
npm run build:site-home         # every library + libraries.dev, as CI does
npm run dev -w @sites/home      # libraries.dev with every page and the Studio
npm run typecheck               # every workspace

The home site imports the built packages, so build a library (npm run build:beam, build:orbs, build:gooey, build:voice, build:metal, build:image) before its page or bench. The standalone demos (@sites/beam, @sites/gooey, @sites/orbs) alias their library to its source and hot-reload without a rebuild.

Releasing

Publishing is per package (publish.yml, npm publish -w <package>): run the workflow by hand with the package name, or publish a GitHub release whose tag is <package>@<version> ([email protected]). A version the registry already has is skipped.

Deploys

The two sites are hosted separately, because GitHub Pages serves one custom domain per repo:

.node-version pins Node 20 for the Cloudflare builds, matching the version the GitHub workflows use; Cloudflare's default is older.

Cloudflare's Retry deployment replays the same commit rather than fetching the branch tip, so a build that failed on an outdated commit keeps failing. Push a new commit to get a fresh one.

Only the beam site carries a public/CNAME; that file is a GitHub Pages mechanism. The Cloudflare-hosted sites bind their domain in the Pages project instead, and the DNS record itself lives at the registrar (inetadmin), not Cloudflare — jakubantalik.com is not on Cloudflare's nameservers.

thinking-orbs arrived by git subtree, so its full history is in this repo — but those commits touched src/…, not packages/thinking-orbs/src/…. git log -- packages/thinking-orbs therefore stops at the merge. To read the real history, log from the commit the merge names:

git log --oneline 9c6d5c3 -- ports/ios/PillsDemo/Sources/PillsApp.swift
git log --follow packages/thinking-orbs/src/index.ts

thinking-orbs also carries native ports under packages/thinking-orbs/ports — a React Native package and a SwiftUI package, kept in step with the web renderer by the golden vectors in spec/. Neither is published yet.

Libraries.dev (Jakubantalik/Libraries.dev)

Searching Database…

4.3K ·GitHub
Libraries.dev
Что это?Libraries.dev — монорепозиторий из семи React-библиотек UI для создания анимированных интерфейсов ИИ-агентов: border beam, thinking orbs, аватары ботов, жидкие gooey-формы, свечение голоса, жидкий металл и загрузчик в виде мозаики из изображений.
Это одна библиотека или набор отдельных пакетов?Это монорепозиторий на npm-workspaces с семью независимо публикуемыми npm-пакетами — по папке на эффект, у каждого свой README и LICENSE, плюс демо-сайты.
Как добавить одну из них в свой проект?Установите нужный пакет через npm (например, npm install border-beam) и оберните им уже имеющийся элемент, либо используйте кнопку Copy prompt на странице каждой библиотеки, чтобы передать шаги установки и настройки агенту для кодинга.
Что нужно для использования — есть ли требования к версии фреймворка?Нужен React 18 или новее. Каждый пакет самостоятелен и не имеет runtime-зависимостей, кроме библиотеки Image, которой также нужен three как peer dependency.
Здесь всё бесплатно?Сами семь библиотек бесплатны и под лицензией MIT; более глубокая настройка каждой библиотеки и экспорт конфигураций живут в Studio, для которой нужен платный тариф Pro.
Можно ли использовать их в коммерческом проекте?Да — сами библиотеки под лицензией MIT и применимы где угодно, включая коммерческие проекты; отдельную лицензию, привязанную к вашему тарифу, имеет только Pro-эксклюзивный контент вроде экспортов Studio и пресетов.
Тёмная тема работает автоматически или её нужно настраивать?Да — значение по умолчанию theme='auto' ищет атрибут data-theme или класс dark у предка, затем переключается на prefers-color-scheme и обновляется на лету; можно и вручную закрепить theme='dark' или theme='light'.
Работает ли сценарий copy-prompt с любым агентом для кодинга?На странице каждой библиотеки есть кнопка Copy prompt, которая передаёт Claude Code, Cursor или Codex полный словарь параметров библиотеки и ваши текущие настройки, чтобы агент сам всё установил и подключил.
Что даёт платный тариф Pro?Pro открывает Studio для глубокой настройки каждой библиотеки сверх публичных playgrounds, позволяет экспортировать точную конфигурацию как props и включает Pro-пресеты, а также все будущие библиотеки и обновления.
Готовы ли нативные версии Thinking orbs для React Native и SwiftUI?Нет — нативные порты лежат в packages/thinking-orbs/ports и синхронизируются через golden vectors, но ни один ещё не опубликован.
What are similar projects?transitions.dev, chakra-ui, arc-library, boardui, shaders, Monocharts, plasma-ui, canvas-ui
Which topics is it in?motion, react-components, voice, ui-library, dark-mode, npm-package, webgl, monorepo, component-library, javascript-library, design, chatbot
Creator
Jakubantalik
Size
91 MB
Stars
4.3K
Updated
CommitOct 15Release[email protected]Sep 17
Age
6mo
Commits · 90 Days