Loading the page.
swipefile · updated 2026-09-19
Ready-made UI components: 19 libraries
Don't ask the agent to «make it pretty»: a design generated from scratch looks like AI slop. It's easier to take a ready-made component — here are 19 libraries to get one via copy-paste, a CLI command, or a prompt for an agent. The code goes into your repo, and you own it.
Cures AI slop. These components are made by people with taste, not averaged out by a model: the page stops looking like thousands of generated twins.
Delivers complex design. WebGL backgrounds, 3D cards, and shader effects can't be generated directly with a prompt: an agent won't build that from scratch, but here you get something that works.
Replaces a mood board. It's also an inspiration library: instead of images you still have to code later, choose by eye and immediately get a working component.
Don't generate an icon or logo as an image either. An interface needs an SVG file, not a PNG from an image generator: QuiverAI draws an icon or logo directly as a vector, and its npx quiverai add command puts the ready-made file into the project as a React component. Plans start at $8 per month; there is no free tier.
How to use it: find your use case in the «When useful» column, open the library website, copy the component or ready-made prompt, then paste it into the project or feed it to an agent (Cursor, Claude Code). The base for almost everything in the table is shadcn/ui; the other collections are installed on top of it.
There are no editorial ratings here: look at the objective data in the right column (GitHub stars, npm downloads, catalog size) and decide for your use case.
| library | when useful | author | data |
|---|---|---|---|
| Project foundation | |||
 shadcn/ui | project foundation: buttons, forms, dialogs; the standard that nearly everything else in the table is built on | shadcn · Vercel | 120 668 ★ GitHub |
 HeroUI | an app with forms and tables that needs accessibility out of the box; this is an npm package, not copy-paste code | the HeroUI team (ex-NextUI) | 30 315 ★ GitHub 512 785 npm downloads per week |
 Origin UI | mobile-first base components with dark mode via a registry | open project | no official repo with stars |
| Animations and wow effects | |||
 React Bits | need animated text, a background, or an effect for a section: copy the code and paste it in | David Haz (@davidhdev) | 44 941 ★ GitHub 4 options: JS/TS × CSS/Tailwind |
 Magic UI | a landing page on the shadcn stack that needs an animation layer | open project | 21 819 ★ GitHub 150+ components |
 Cult UI | animated shadcn blocks on Framer Motion with editorial taste | Nolly Studio | 6 036 ★ GitHub |
 Motion Primitives | engineering motion primitives on Framer Motion without visual overload | Julien Thibeaut (@ibelick) | 5 839 ★ GitHub 8 687 npm downloads per week |
 Animata | copy-paste animation with reduced-motion and screen-reader support out of the box | Codse | 2 771 ★ GitHub |
 Aceternity UI | a hero section with a wow effect: 3D cards, beams, particle backgrounds | Manu Arora | no open repo; Pro templates $199 lifetime |
 SmoothUI | spring microanimations: fine interface motor skills | Edu Calvo (@educlopez) | 877 ★ GitHub |
 Transitions.dev | Need transitions for menus, modal windows, and tabs: copy the code or connect a skill with ready-made animations for the agent | Jakub Antalik (@Jakubantalik) | 27+ transitions in the skill Some effects are available through Pro |
| Ready-made block catalogs | |||
 21st.dev | need a ready-made block for a specific section (hero, pricing, footer); pull it in with a prompt in Cursor or Claude Code | design engineer community · YC W2026 | 12 000+ components in the catalog 5 381 ★ GitHub for the open source core |
 uiverse.io | micro-detail: button, loader, checkbox; export to HTML/CSS, Tailwind, React, and Figma | open community | 5 800+ elements on the site |
 Bencho | Need interactive menus, toggles, or sliders: configure the parameters on the site, then copy the code into the project | Lorenzo Cabra (@cabralorenzo) | 29 blocks in the catalog Block code: MIT |
| Niche and experimental | |||
 Canvas UI | see where the genre is headed: WebGL effects over regular DOM, while text stays text | David Haz (@davidhdev) | 3 494 ★ GitHub |
 vgpu | need a shader background or 3D scene: the agent takes a ready-made example, and one shader runs in the browser and headless Node.js | Vercel Labs | 563 ★ GitHub render tests in CI |
 Kokonut UI | AI interfaces: chat inputs, voice elements, particle buttons | Kokonut Labs | 2 002 ★ GitHub |
 Thinking Orbs | an "agent is thinking" indicator in chat or a status line: nine pinpoint orb states (searching, deciding, listening) on canvas, installed as an npm package with no dependencies | Jakub Antalik (@Jakubantalik) | 1 923 ★ GitHub 143 192 npm downloads per week |
 Skiper UI | niche form interactions and layout primitives unavailable from the major players | indie project | Not measured |
The main snapshot of GitHub stars and npm downloads was taken 2026-08-06 via the GitHub and npm APIs; vgpu was checked 2026-08-28; Transitions.dev was checked 2026-09-13 against the website and skill documentation; Bencho was checked 2026-09-13 against the catalog and block license. Catalog sizes are taken from library websites. Aceternity UI and Origin UI have no public repositories, so the table has no stars for them.
Prompt slop
«Make a beautiful modern landing page with smooth animations and a wow effect»
The agent has nothing to build taste from: it averages everything it has seen and produces an AI-slop landing page like everyone else's.
A prompt that works
«Take Hero Parallax from Aceternity, install it following the docs, and insert our copy»
The agent doesn't invent a design; it installs a component written by someone with taste: the complex animation already works.