Living collection
Ask Claude Code, Codex or another coding agent for “a modern website” and you leave a lot of decisions open: typography, cards, buttons, animations. You can end up arguing with a screen that looks remarkably similar to twenty other websites.
8 UI libraries and 1 inspiration resource · Sources reviewed September 19, 2026
In my experience managing paid traffic to hundreds of landing pages, the pages that convert best are rarely the most spectacular. They have a clear message and a button you do not have to hunt for.
That shapes this selection. The purpose is to find useful pieces while keeping the visitor's task in view. Navigation needs to work. A form needs to submit. A background can wait.
If your offer and next step are still unclear, work on those first. Choosing another effect will not write the headline for you.
Signed: Dani
Interface foundations provide controls and forms. Visual components add sections and effects. A catalogue helps you discover work from different authors. Before building, a library of real interfaces helps you decide what to ask your coding agent for.
In this article
Build the interface foundation
shadcn/ui
Sources reviewed: 11 Sep 2026
Interface components with code you can adapt.
Why it is here: The de facto standard in UI components for modern web development. Code you copy and adapt, not a dependency that ties you down.
Its limit: Requires a technical profile. If your team does not write code, it is not an option. And the maintenance of each copied component is on you.
A collection of interface components (buttons, forms, tables, charts) you copy into your project and modify to your liking. You do not install a package: the code is yours from minute one.
Read the full reviewOfficial website
Compatibility and installation
Compatibility. Web platform. Check the official documentation at ui.shadcn.com for the specific technical requirements of your development environment.
Real cost and license
Cost. The official website does not show paid plans or commercial licenses. Components are copied from the public documentation at no visible cost. Checked in September 2026.
Example and alternative
Example. A team needs a landing page with a form, a metrics dashboard, and charts. They copy the shadcn/ui blocks, adapt styles to the client's brand, and deploy without depending on external updates.
Alternative. To compare UI component options, see the component library guide on Marketing Ultra.
Sources and review
Review. Reviewed on September 21, 2026 based on public documentation. No hands-on test run by the team.
Use it as a starting point for buttons, forms, dialogs and other application elements. Its approach brings component code into your project so you can modify it. The official documentation explains the system, and the repository has an MIT licence.
A registration screen is a useful example. It needs inputs, errors and a submit action before it needs an animated background. This is the part of the job to investigate first.
Best for: React projects that need a consistent, adaptable interface foundation.
Details and sources
Cost and format: free code incorporated into your project.
Watch for: ownership of your changes includes maintaining them. Changing markup or focus behaviour can break an otherwise accessible component.
Add components and animation
Magic UI
Sources reviewed: 11 Sep 2026
Animated components for marketing websites.
Why it is here: Over 150 free animated components under the MIT license, individual installation with shadcn CLI, and an official MCP server that connects the catalog directly to AI-powered editors.
Its limit: The documented catalog uses React, Tailwind CSS, and Motion. Direct integration with other frameworks has not been verified, nor has any concrete time saving.
A collection of animated pieces (logo marquees, card effects, text transitions) that you add to your React project so your landing pages have professional motion without coding each animation from scratch.
Read the full reviewOfficial website
Compatibility and installation
Compatibility. Components for React, TypeScript, Tailwind CSS, and Motion; installation via shadcn CLI. The repository declares Node 22.14+ for its own development environment. Check each component's dependencies in the target project.
Real cost and license
Cost. MIT library: €0. Magic UI Pro: approximately €173.65 per individual license, one-time payment, at the ECB rate of 18-Sep-2026. Includes 50+ sections and 9+ templates, with commercial use and no code resale. The final tax amount at checkout has not been verified.
Example and alternative
Example. Adding a logo marquee to a React project with npx shadcn@latest add @magicui/marquee and reviewing its integration.
MCP. Querying the catalog from a compatible client. The official documentation offers listRegistryItems, searchRegistryItems, and getRegistryItem.
Sources and review
Review. Official sources consulted on 21-Sep-2026. Approximate conversion using the ECB rate of 18-Sep-2026. Social citations and the video are dated historical examples, not independent testing or current consensus.
Official website · GitHub Repository · MCP Server · Magic UI Pro · ECB Rate
Magic UI offers visual pieces for React and Tailwind CSS, with documentation for individual components and a separate Pro offering. Its public repository has an MIT licence; do not assume that every paid product has identical terms.
One concrete starting point is a background for an existing section. Dot Pattern lets you investigate a small addition while keeping the headline and button in place.
Best for: adding visual treatment to sections of a React website.
Details and sources
Cost and format: free public components; separate Pro products.
Watch for: animation dependencies vary by component. Check the chosen implementation and its effect on the page.
Aceternity UI
Sources reviewed: 11 Sep 2026
Visual effects and sections for React websites.
Why it is here: A library of 200+ React components with professional built-in animations and an MCP server for AI agents. Solves the bottleneck of coding visual effects for landing pages.
Its limit: Documented for React + Tailwind CSS + Motion. No visible public repository or verified pricing. Copied code does not update automatically.
Animated components ready to copy and paste into React projects. Instead of coding every scroll effect or transition from scratch, you pick them from the catalog and adapt them. You can also connect an AI agent via MCP to build them for you.
Read the full reviewOfficial website
Compatibility and installation
Compatibility. The official material reviewed describes the components as built with React, Tailwind CSS and Motion. It does not document versions for Vue, Svelte or other frameworks, nor explicit installation requirements on the home page.
Real cost and license
Cost. The home page shows a 'Pricing' navigation item and a 'Get All-Access' button, but the reviewed evidence does not confirm a paid plan or provide verified figures as of September 2026. The scope of free access is not documented on the home page.
Example and alternative
Example. Copying an animated hero section and a feature grid for a campaign landing page, then adapting the code to the project.
Alternative. The reviewed evidence does not provide enough information about Magic UI or shadcn/ui to support a direct comparison.
Sources and review
Review. Analysis based on public information from the official website, consulted in September 2026. No documented hands-on test.
Aceternity is a place to explore headers, backgrounds and cards with a distinctive visual treatment. The official website separates component documentation from its commercial offerings. Read the requirements of the piece you want to use.
It fits a section with a clear visual purpose. Browsing without that purpose makes it easy to keep adding motion until every part of the page competes for attention.
Best for: presentation sections and marketing pages.
Details and sources
Cost and format: free components and paid offerings; check the individual resource.
Watch for: the Aceternity licence sets permitted uses and redistribution restrictions. Do not assume the entire offering is MIT or that demo images share the code's permissions.
React Bits
Sources and code reviewed: 19 Sep 2026
More than 200 text effects, backgrounds and interactive React components.
It brings visible component source into the project with JavaScript, TypeScript, CSS and Tailwind variants. The review tests DotGrid from the current source and explains its dependencies, isolated build size and required production adaptations.
DotGrid responds to mouse movement and clicks, but the reviewed source has no reduced-motion alternative or equivalent touch interaction. It can support a hero when the agent also prepares a static version.
Best for: adding one purposeful effect to a React website after deciding what it should achieve.
Read the React Bits review and DotGrid testReact Bits website
Test, MCP, licence and limits
Cost and format: free code with more than 200 components and variants depending on the piece. DotGrid adds GSAP.
MCP: React Bits uses the shadcn MCP with the @react-bits registry. It does not run a separate MCP server.
Watch for: MIT with Commons Clause allows use inside products, but restricts selling or redistributing components as a catalogue. Check reduced motion, touch and performance on the real page.
Animmaster Lib
Sources reviewed: 11 Sep 2026
A downloadable package of animated website components.
The brand writes its name Animmaster Lib, although Animaster is a common search spelling. It sells files for integration into web projects. Check the technology of the individual piece before deciding whether it fits your site.
Best for: investigating a specific effect already identified in the catalogue.
Read the Animmaster review: contents, pricing and AI workflowOfficial Animmaster Lib website
Details and sources
Cost and format: paid package with its own terms. Junior is not the main component package.
Watch for: we have not installed the purchased package. This entry does not establish its performance or code quality.
Skiper UI
Sources reviewed: 11 Sep 2026
Visual components for React interfaces with Tailwind.
Why it is here: 106+ visual components with advanced effects (reveal, cursor trail, drag & scroll) that install with a single shadcn/ui CLI command. The site describes them as requiring "no extra packages," while also listing Motion.dev in its stack.
Its limit: The official site and public documentation reviewed do not link to a public repository, so you cannot audit the code through those sources before paying. The site names Gxuri as founder and credits Gxuri with design and development, but does not document the maintainer count.
A collection of animated and visually striking components for websites built with React, Next.js, and shadcn/ui. Copy the component, drop it into your project, and it works. The most impressive ones are paid.
Read the full reviewOfficial website
Compatibility and installation
Compatibility. Works with Next.js and shadcn/ui. The official site describes each component as a single file with "no extra packages," while also listing Motion.dev in its stack.
Real cost and license
Cost. Free plan with basic components. Premium: $129 (one-time), all premium components and lifetime updates. Exclusive: $549 (one-time), adds Figma file and web templates (coming soon). Prices in USD; no official EUR pricing.
Example and alternative
Example. Install a component with npx shadcn add @skiper-ui. It is added as a local file to the project, ready to customize.
Alternative. Magic UI is a free, open-source alternative with a broad catalog of animated components for shadcn + React. Aceternity UI is another option with advanced visual effects.
Sources and review
Reviewed. Reviewed in September 2026 based on the official website and public documentation of Skiper UI.
Skiper was one of the resources featured alongside Animmaster in the original article. Its catalogue includes free components and a Premium offering, separated on the pricing page.
Use it to find a component for a section you already intend to build. Before integration, inspect its requirements and whether it belongs to the free or paid selection.
Best for: adding visual components to a compatible React project.
Details and sources
Cost and format: free selection plus Premium components.
Watch for: check the component permissions and service terms. This guide does not classify the entire catalogue as open source.
Vengeance UI
Sources reviewed: 11 Sep 2026
Visual React components with public source code.
Why it is here: It brings together components and blocks focused on visual interactions for React and Next.js projects, with installation documented through the shadcn CLI.
Its limit: The licence, pricing, an official MCP integration, and an independent installation and performance test could not be verified.
It helps you add animated buttons, tooltips, cards and blocks to a website without building every interaction from scratch.
Read the full reviewOfficial website
Compatibility and installation
Compatibility. The official source identifies React and Next.js as compatible environments and documents installation through npx and the shadcn CLI. Vercel is listed as support through its OSS programme, not as an integration.
Real cost and license
Cost. There is no verifiable official price or euro conversion available as of 25 September 2026. The source does not identify a specific licence either.
Example and alternative
Example. It can be explored to add a specific visual interaction to a landing page and check it first on a separate branch.
Alternative. The listing does not provide verified alternatives; compare other animated component libraries before deciding.
Sources and review
Review. Listing and official website reviewed on 25 September 2026; no reproducible test or approved experience from Dani was provided.
The third resource from the original article publishes code under MIT in its repository. Its stack includes React, TypeScript, Tailwind and Motion.
It is an option when you want to explore a visual component and inspect the implementation before integrating it. Public code makes that inspection possible; the selected piece and its dependencies still need testing in your project.
Best for: exploring visual React components with public source.
Details and sources
Cost and format: free code under MIT in the repository reviewed.
Watch for: the domain is spelled “vengenceui.com.” Follow the official links and check the installation instructions rather than guessing the package name.
Discover components from different authors
21st.dev
Sources reviewed: 11 Sep 2026
A catalogue for discovering components and interface resources.
Use 21st.dev to widen the search when you have not found the right piece. Resources come from different authors, so treat each entry as its own decision about technology, provenance and usage terms.
Best for: exploring alternatives and finding a specific implementation.
Details and sources
Cost and format: vary by resource and product.
Watch for: the platform terms distinguish authors' code from platform materials. A component licence does not automatically cover the images, videos or previews used to display it.
Inspiration before building
Refero does not provide code components. I include it because looking at real screens and flows before asking a coding agent to build a website gives the work a clearer direction.
Refero
Sources reviewed: September 18, 2026
Real interface references for Claude Code and Codex.
Why it is here: I look at real screens and flows before asking an agent to code. Refero helps me move beyond a generic AI interface.
Its limit: it does not provide React components or decide the hierarchy, message or CTA for me. The MCP requires an account with access.
In plain English: it is a library of screenshots from real products. Find a screen close to what you need, study what works, and give your agent specific instructions. Then choose a component library to build it.
Best for: researching interface patterns before writing a prompt or installing components.
Read my Refero reviewExplore Refero
Compatibility, cost, examples and sources
Compatibility and setup
Browser. The web library lets you research screens without setting up a coding project.
Agents. The official MCP is designed to query references from compatible agents, including Claude Code and Codex. It requires an eligible account.
Real cost and licence
Plan. You can explore a limited part of the library for free. I paid €17 per month plus tax for monthly Pro in August 2026.
Lifetime. Refero offered a lifetime purchase when I reviewed it. Check current pricing and terms on the official site.
Example and alternative
Example. Find onboarding screens, decide which hierarchy serves your product, then build the controls with shadcn/ui.
Alternative. Mobbin also lets you research screens. For adaptable code components, use the libraries in the earlier sections.
Sources and review
Review. Checked on September 18, 2026 against the official product and the linked review. The external video in that review shows a manual search, not an MCP test.
Mobbin
Pantallas y flujos reales para orientar el diseño antes de escribir código.
Why it is here: It brings together references from real products and advertises a catalogue of more than 1,000 iOS and web apps, plus 200 websites, with new content every week.
Its limit: The available evidence does not make it possible to verify its internal operation, paid pricing, or the requirements and capabilities of its MCP.
It helps you see how other products approach screens and flows before designing your own, without treating those references as proof of performance.
Read the full reviewOfficial website
Compatibility and installation
Compatibility. The advertised catalogue covers iOS and web apps, as well as websites; the source does not detail systems compatible with its MCP.
Real cost and license
Cost. A free account and paid plans exist, but amounts, billing periods, limits, and tax treatment in euros have not been verified.
Example and alternative
Example. It can be used as a starting point for researching references before designing a landing page or sign-up flow.
Alternative. The supplied brief identifies no verified alternative, so inventing a comparison would not be appropriate.
Sources and review
Review. Information checked against Mobbin’s homepage on September 26, 2026; no hands-on test was performed.
How to choose a UI library
Start with your existing project. A React website can use components built for that environment. A WordPress site or a plain HTML page requires a different integration decision. An AI assistant can help adapt code, but dependencies still matter.
Choose by the task:
- For forms, dialogs and controls, look at interface foundations.
- For a header, marketing section or visual effect, choose an individual component.
- To explore several authors, use a catalogue and inspect each resource separately.
Consider the work after installation too: testing, customization and maintenance. Free code can remove the purchase cost. You still have a website to finish.
How to ask an AI assistant to use an actual component
“Make it look like this” may produce a recreation rather than an integration. To use the existing work, supply the documentation link or source you are entitled to use, and ask the assistant to check compatibility.
Claude Code and Codex can also search for resources from inside the agent: shadcn/ui provides an MCP server for its registries, while 21st.dev supports component search and installation through its CLI and MCP. For the other catalogues, provide documentation or the chosen component's code. Check the licence, dependencies and rendered result in every case.
For example:
Inspect this project's technology. I want to add one component from the library I specify. Read its documentation and use its actual source under the applicable licence. Explain the dependencies and where it fits before changing the page. Preserve the content and CTA. Check errors, keyboard access, touch interaction, reduced motion and mobile overflow. Report what you verified and what you could not test.
Once one piece works, decide whether the page needs another. Installing five libraries for a four-section landing page can create more maintenance than the initial shortcut saves.
What was checked for this selection
The official sources, documentation and licences for the eight libraries were first reviewed on September 11, 2026. React Bits was checked again on September 19 against the current source: the complete repository build and an isolated DotGrid integration both completed successfully. Refero was checked on September 18 against its website, review and attributed sources.
The React Bits test establishes those builds and the reviewed source, not conversion, FPS on physical phones or the entire catalogue. DotGrid provides neither reduced-motion handling nor touch interaction equivalent to a mouse. The paid Animmaster package remains untested. Refero provides visual references; its linked video does not test the MCP.
Frequently asked questions
What is a UI component library?
A collection of reusable interface pieces such as buttons, forms, menus and sections. This guide also includes visual effects, a multi-author catalogue and Refero as a visual inspiration resource, separate from the code libraries.
Are these AI tools?
Their role here is to provide code and references for an AI-assisted website project. Products may have additional integrations, but using their components with an assistant does not prove native compatibility with a particular AI tool.
Do they work in WordPress?
It depends on the component and integration. React code needs an environment that runs it; even HTML, CSS and JavaScript must coexist with the theme and existing scripts. Check on a separate copy before changing a live website.
Which library should I start with?
For React forms and controls, investigate shadcn/ui. For a specific visual section, inspect a relevant Magic UI, Aceternity or React Bits component and check whether it fits. The Animmaster review covers the paid package as a separate purchase decision.
Can I use all of them commercially?
Conditions differ. A licence may allow you to use code in a client's website while restricting resale as a template. Read the licence linked from the resource entry for your intended use.
