Loading the page.
swipefile · updated 2026-10-07
Ready-made UI components: 30 libraries with previews
Ready-made buttons, forms, landing page blocks and agent interfaces. Pick an example by look and task, then take the code into your project.
Click a preview to see the details. The frames are static; follow the "Demo and code" link to check the animation.
| library and preview | when useful | author | code and data |
|---|---|---|---|
| Project foundation | |||
 shadcn/uiApp buttons, forms and cards Demo and code | when usefulProject foundation: buttons, forms, dialogs; components are copied into your project and become the basis of your design system | authorshadcn · Vercel | code and data 120,668 ★ GitHub |
 HeroUIApp forms, toggles and cards Demo and code | when usefulan app with forms and tables that needs accessibility out of the box; this is an npm package, not copy-paste code | authorthe HeroUI team (ex-NextUI) | code and data 30,315 ★ GitHub 512,785 npm downloads per week |
| coss ui (ex-Origin UI) Accordion: expandable panels on Base UI Demo and code | when usefulBasic forms, menus and panels on Base UI. Origin UI has moved here; coss ui components are under active development. | authorcoss team | code and data apps/ui and apps/origin components: MIT Code / CLI · other parts of the monorepo: AGPLv3 |
| Kibo UI | when usefulWorkspace: Gantt chart, kanban, calendar, editor and file upload. Ready-made composite components on top of shadcn/ui. | authorKibo · shadcnblocks | code and data MIT · Kibo CLI / shadcn CLI Free open-source library |
| Neobrutalism | when usefulA bold interface with thick outlines and hard shadows: buttons, forms and cards in one style. | authorNeobrutalism team | code and data Base MIT components · shadcn CLI Separate paid Pro blocks available |
| Animations and wow effects | |||
 React BitsSpecular Button: a highlight on a 3D button Demo and code | when usefulneed animated text, a background, or an effect for a section: copy the code and paste it in | authorDavid Haz (@davidhdev) | code and data 44,941 ★ GitHub 4 options: JS/TS × CSS/Tailwind |
 Magic UIRainbow Button: a rainbow glow around the button Demo and code | when usefula landing page on the shadcn stack that needs an animation layer | authoropen project | code and data 21,819 ★ GitHub 150+ components |
 Cult UIShift Card: a card that reveals details Demo and code | when usefulanimated shadcn blocks on Framer Motion with editorial taste | authorNolly Studio | code and data 6,036 ★ GitHub |
 Motion PrimitivesProduct card that expands into a dialog Demo and code | when usefulengineering motion primitives on Framer Motion without visual overload | authorJulien Thibeaut (@ibelick) | code and data 5,839 ★ GitHub 8,687 npm downloads per week |
| Shaders | when usefulBuild an animated background, a glass effect or a cursor reaction in a visual editor, then export the code for your site. | authorShader Effects | code and data WebGPU · MIT components · npm / CLI / MCP The editor and code export are free; ready-made Pro presets are paid separately |
 AnimataAI Button: a button with a moving gradient Demo and code | when usefulReady-made animated buttons, cards, backgrounds and text effects for React | authorCodse | code and data 2,771 ★ GitHub |
 Aceternity UILanding page effects: 3D cards and backgrounds Demo and code | when usefula hero section with a wow effect: 3D cards, beams, particle backgrounds | authorManu Arora | code and data Code in the docs and via CLI Paid blocks and templates available |
 SmoothUIAnimated interfaces and material effects Demo and code | when usefulspring microanimations: fine interface motor skills | authorEdu Calvo (@educlopez) | code and data 877 ★ GitHub |
 Transitions.devPatterns for showing, switching and expanding UI Demo and code | when usefulNeed transitions for menus, modal windows, and tabs: copy the code or connect a skill with ready-made animations for the agent | authorJakub Antalik (@Jakubantalik) | code and data 27+ transitions in the skill Some effects are available through Pro |
| Joly UI | when usefulA striking button for the main action: liquid metal, glass, highlights. Also has forms and text effects. | authorJohuniq | code and data MIT · copy the code / shadcn CLI Liquid Metal uses WebGL |
| Lightswind UI | when usefulButtons with a holographic or liquid effect, 3D cards and backgrounds for a landing page. | authorMUHILAN and team | code and data Open MIT library · CLI / MCP Separate paid Pro collection |
| Animate UI | when usefulAdd motion to everyday app elements: menus, tabs, dialogs and icons. Variants for Radix, Base UI and Headless UI. | authorSkyleen | code and data MIT · shadcn CLI React · Tailwind CSS · Motion |
| UI Layouts | when usefulBuild an unusual gallery, draggable blocks or animated windows and a macOS-style dock. | authorNaymur | code and data Open MIT library · copy / CLI Paid blocks and templates are a separate Pro |
| Eldora UI | when usefulShow off a product on a landing page: animated diagrams, 3D icon tiles and device mockups. | authorKarthik Mudunuri | code and data MIT · copy the code / shadcn CLI React · Tailwind CSS · Motion |
| Ready-made block catalogs | |||
 21st.devComponents from various authors: buttons, menus and cards Demo and code | when usefulneed a ready-made block for a specific section (hero, pricing, footer); pull it in with a prompt in Cursor or Claude Code | authordesign engineer community · YC W2026 | code and data 12,000+ components in the catalog 5,381 ★ GitHub for the open source core |
 uiverse.ioButtons, toggles and small effects Demo and code | when usefulmicro-detail: button, loader, checkbox; export to HTML/CSS, Tailwind, React, and Figma | authoropen community | code and data 5,800+ elements on the site |
 BenchoInteractive blocks: signature, buttons and toggles Demo and code | when usefulNeed interactive menus, toggles, or sliders: configure the parameters on the site, then copy the code into the project | authorLorenzo Cabra (@cabralorenzo) | code and data 29 blocks in the catalog Block code: MIT |
| shadcn.io | when usefulFind variants of buttons, blocks and themes. This is an independent catalog, not the official shadcn/ui. | authorAzencot LLC | code and data Copy the code / shadcn CLI · Pro available Pro Individual is for non-commercial projects only; for commercial use, Team / Organization |
| Agent interfaces | |||
 Kokonut UIPrompt input with a model picker Demo and code | when usefulAI interfaces: chat inputs, voice elements, particle buttons | authorKokonut Labs | code and data 2,002 ★ GitHub |
 Thinking OrbsAnimated orbs for voice agent states Demo and code | when usefulan "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 | authorJakub Antalik (@Jakubantalik) | code and data 1,923 ★ GitHub 143,192 npm downloads per week |
| ElevenLabs UI | when usefulVoice agent: an orb with conversation states, a waveform, an audio player and a microphone picker. | authorElevenLabs | code and data MIT · ElevenLabs CLI / shadcn registry Services and APIs are billed separately from the UI |
| AI Elements | when usefulAgent chat: messages, answer sources, reasoning steps, tool calls and a workflow diagram. | authorVercel | code and data Apache-2.0 · CLI / shadcn registry Components for the AI SDK; API costs are separate |
| Niche and experimental | |||
 Canvas UIWebGL effects over plain HTML Demo and code | when usefulsee where the genre is headed: WebGL effects over regular DOM, while text stays text | authorDavid Haz (@davidhdev) | code and data 3,494 ★ GitHub |
 vgpuWebGPU shader gallery Demo and code | when usefulneed a shader background or 3D scene: the agent takes a ready-made example, and one shader runs in the browser and headless Node.js | authorVercel Labs | code and data 563 ★ GitHub render tests in CI |
 Skiper UIAnimated input fields and a tournament bracket Demo and code | when usefulniche form interactions and layout primitives unavailable from the major players | authorindie project | code and dataNot measured |
Previews and new libraries were checked on Oct 1, 2026 against official websites and repositories; Shaders was added and checked 2026-10-07. Terms for open-source code and paid Pro collections may differ. Historical metrics are kept with dates: the main GitHub/npm snapshot is 2026-08-06, vgpu is 2026-08-28, Transitions.dev is 2026-09-13, Bencho is 2026-09-13. They are not updated in real time.
References and backgrounds
Here you can choose a screen look, animation behavior or background. Show the agent a specific example and describe what you want to recreate. To build it, pick components from the table above. Reference galleries help with ideas; access to ready-made code depends on the service. For a product demo video, there are video and animation collections.
- Mobbin — Browse screens and user flows from real apps before building a form, menu or onboarding.
- Refero — Find examples of tables, dashboards and other elements in real web products and iOS apps.
- Land-book — Pick an example of layout, typography and sections for a landing page.
- Inspora — Find a visual idea in collections of web design, products and animation.
- 60fps — Watch transitions and interactions in mobile interfaces in motion.
- Backgrounds Supply — Pick and download a background for a website or app. The collection is paid; terms of use are listed on the site.
Links checked on Oct 7, 2026.
Without a specific example
«Make a beautiful modern landing page with smooth animations and a wow effect»
It's unclear exactly what result you want.
With a chosen component
«Take Specular Button from React Bits, install it following the docs and put it on the "Discuss a project" button. Adjust the colors to match the site.»
The agent has a concrete reference, the source code and a clear task. After installing, check keyboard use, the mobile screen and reduced motion mode.
Setting up a project is covered in the guide to your first tech stack.
You can include the chosen component in a task for an AI agent.
Need vector icons too? QuiverAI creates SVGs for interfaces.
