Skip to content
Day 69: new resources are added every day. See what's new
Best Productivity ResourcesBy Shushant LakhyaniVerified creator

Website

Libraries.dev

High-crafted UI effect libraries for AI agents and modern apps.

Visit Libraries.dev4.8

  • Rating

    4.8 / 5

  • Pricing

    Freemium

  • Difficulty

    Intermediate

  • Works on

    Web

Built with love by Shushant Lakhyani. Building bestproductivityresources.com

Free: 1,100+ ways people make money onlineFree: 399+ ways to make money online

What is Libraries.dev?

Libraries.dev is the home of the UI effect libraries Beam, Orb, Gooey, Metal and Image, production-ready React effects you install from npm and drop straight into an app. The collection includes border beams that ride a glowing highlight along an element's edge, thinking orbs for loading states, gooey elements that merge like liquid, a glow that rises with your voice and a loader that morphs into the generated image. With more than 2.3 million installs and praise from builders at Vercel, Intercom and Stripe, the effects are designed to be prompted into place by coding agents as easily as by hand.

Pros: what Libraries.dev does well

  • Production-ready React effects installable from npm
  • Built to work smoothly with AI coding agents
  • Over 2.3 million installs and strong community praise
  • Effects cover loaders, orbs, beams, gooey and metal styles

Cons: where it falls short

  • React only, so other frameworks are not supported
  • Full access to every effect requires the Pro tier

Who Libraries.dev is for

React developers and designers who want polished, agent-friendly UI effects without building animations from scratch.

Who can skip it

Teams working in Vue, Svelte or vanilla stacks, or apps that deliberately avoid decorative animation.

What people use Libraries.dev for

  • Adding animated effects such as a border beam, thinking orbs or a gooey blob to an AI chat interface
  • Giving a voice or AI assistant screen a polished animated look without building it by hand
  • Letting a coding agent install and set up a UI effect library from a copied prompt

How to get started

  1. 1Open libraries.dev and pick a library, such as Border beam, Thinking orbs, Gooey, Liquid Metal or Image generation.
  2. 2Install it from npm (for example npm install border-beam) in a React 18 or newer project, or copy the prompt and paste it into Claude Code, Cursor or Codex.
  3. 3Add the component to your interface and adjust its settings to fit your design.

Libraries.dev pricing

The core libraries (Beam, Orb, Gooey, Metal and Image) are MIT-licensed and free on npm. A paid Pro plan unlocks the Studio for deeper customisation, Pro presets and future libraries. See current prices on Libraries.dev's site

Checked 2026-11-03. Prices change, so double-check before you pay.

Libraries.dev FAQ: quick answers

Are the Libraries.dev libraries free?
Yes. Beam, Orb, Gooey, Metal and Image are MIT-licensed and free on npm. Pro adds the Studio and Pro presets.
Which frameworks does Libraries.dev support?
React 18 or newer. Border beam and Thinking orbs also have SwiftUI and React Native versions.

Libraries.dev alternatives

Not sold on Libraries.dev? These do a similar job, and each card says what it has in common.

All Workflows resources

Astryx Design System

Focus: design system, stylex and open source. Shares react and components with Libraries.dev. A framework, not a website. Free (Libraries.dev: Freemium). Rated 4.6 (Libraries.dev: 4.8).

FrameworkFreeWeb
4.6Visit

Transitions.dev

Focus: ui, transitions and open source. Shares animation and react with Libraries.dev. A framework, not a website. Free (Libraries.dev: Freemium). Rated 4.5 (Libraries.dev: 4.8).

FrameworkFreeWeb
4.5Visit

ForgeUI

Focus: tailwind, ui components and shadcn. Shares react and design with Libraries.dev. Rated 4.4 (Libraries.dev: 4.8).

WebsiteFree planWeb
4.4Visit

Frontend Design Skill

Focus: claude, claude skills and frontend design. Shares design with Libraries.dev. An AI tool, not a website. Free (Libraries.dev: Freemium). Same 4.8 rating.

AI ToolFreeWeb
4.8Visit

21st

Focus: tailwind, ui and shadcn. Shares react and components with Libraries.dev. Rated 4.7 (Libraries.dev: 4.8).

WebsiteFree planWeb
4.7Visit

Theme Factory Skill

Focus: claude, claude skills and themes. Shares design with Libraries.dev. An AI tool, not a website. Free (Libraries.dev: Freemium). Rated 4.7 (Libraries.dev: 4.8).

AI ToolFreeWeb
4.7Visit

Free alternatives to Libraries.dev

Want to spend nothing? These free picks cover similar ground.

Kage

Focus: design inspiration, ui and prompts. Shares ai agents and components with Libraries.dev. Free (Libraries.dev: Freemium). Rated 4.6 (Libraries.dev: 4.8).

WebsiteFreeWeb
4.6Visit

Keyline Icons

Focus: icons, svg and shadcn. Shares react and design with Libraries.dev. Free (Libraries.dev: Freemium). Rated 4.6 (Libraries.dev: 4.8).

WebsiteFreeWeb
4.6Visit

Wake

Focus: sessions, rust and search. Shares ai agents with Libraries.dev. A desktop app, not a website. Free (Libraries.dev: Freemium). Adds macOS, Windows and Linux. Rated 4.6 (Libraries.dev: 4.8).

Desktop AppFreemacOS, Windows
4.6Visit

microcharts

Focus: charts, sparklines and svg. Shares react and components with Libraries.dev. Free (Libraries.dev: Freemium). Rated 4.5 (Libraries.dev: 4.8).

WebsiteFreeWeb
4.5Visit

shadercn

Focus: shaders, webgpu and wgsl. Shares react and components with Libraries.dev. Free (Libraries.dev: Freemium). Rated 4.5 (Libraries.dev: 4.8).

WebsiteFreeWeb
4.5Visit

bloks

Focus: local-first, desktop and privacy. Shares ai agents with Libraries.dev. A desktop app, not a website. Free (Libraries.dev: Freemium). Adds macOS, Windows and Linux. Rated 4.4 (Libraries.dev: 4.8).

Desktop AppFreemacOS, Windows
4.4Visit
Are you the maker of Libraries.dev?Get a free Featured badge for your site, a share image and ready-to-paste posts. No sign-up.

New · updated daily

What people are actually doing with AI

Real use cases shared on Reddit, Hacker News, X, GitHub and blogs, summarised in plain words with a link to every original post.

Browse AI use cases

Free Notion database

1,100+ ways people are making money online

Real online businesses, creators and projects, broken down by how they make money: apps, online stores, AI tools and more. Free on Gumroad.

Get the free database

Free Notion database

399+ ways to make money online

Hundreds of online income methods in one place, so you can compare options and pick one to try. Free on Gumroad.

Get the free list

For research and ideas only. Results vary and nothing here is a promise of income. See our Disclaimer.

Weekly newsletter

Everything new, every Monday.

One short email every Monday with everything shipped that week: new free tools and websites, new guides, new free browser tools and what's new in my free Gumroad libraries, plus how the site is growing. Free, and you can unsubscribe anytime.

Join the newsletter

You sign up on Gumroad, which stores your email to send the newsletter. See our Privacy Policy.