Xtend UI is an open-source frontend library that delivers Tailwind CSS components enhanced with vanilla JavaScript for advanced interactions and animations. It is built by Riccardo Caroli and licensed under MIT, with documentation licensed under CC-BY-4.0.
What is Xtend UI?
Xtend UI is a collection of UI components styled with Tailwind CSS and enhanced with vanilla JavaScript. It takes Tailwind CSS markup and adds interactive behavior such as animations, positioning, and focus management, producing ready-to-use web interface elements. The library is framework agnostic and can be embedded into any JavaScript framework, including React, Vue, or Svelte. Development is tracked on GitHub with 452 stars, and the project is maintained by Riccardo Caroli (copyright 2017-2026).
Key Features
- Tailwind CSS integration — Components are styled using Tailwind CSS and processed with PostCSS, so you can customize them with your existing Tailwind configuration.
- Vanilla JavaScript enhancements — No framework requirements; interactions are powered by modern vanilla JS using optional chaining and ES modules.
- GSAP animations — Complex animations and interactions are handled with the GreenSock Animation Platform (GSAP) library.
- Popper.js positioning — Floating elements like tooltips and dropdowns are positioned with Popper.js.
- Focus Trap — Accessible keyboard navigation is ensured with the focus-trap library.
- Feather Icons — The icon set used across components comes from Feather Icons.
- Framework agnostic — The vanilla JS core works inside any JavaScript framework, as detailed in the official frameworks documentation.
- Modern build tooling — The library is polyfilled with Babel and Core JS, released via Semantic Release, and hosted on GitHub Pages with Cloudflare.
Who is it for?
Xtend UI is aimed at frontend developers who use Tailwind CSS and want prebuilt interactive components without adopting a heavy framework. It suits developers building custom UI kits, teams that need accessible components with keyboard trapping, and JavaScript developers who prefer vanilla JS over framework-specific libraries.
What can you do with Xtend UI?
- Build interactive interfaces: Drop in components that handle dropdowns, modals, tooltips, and other common UI patterns with JavaScript behavior included.
- Customize with Tailwind: Extend or override the styling using Tailwind's utility classes without touching the JavaScript logic.
- Integrate into any framework: Use the library inside React, Vue, Svelte, or plain HTML projects since the core is framework agnostic.
How does Xtend UI work?
To run the project locally, clone the repository, install packages with pnpm install, and start the development server with pnpm dev. The documentation site is built with Next.js and can be served in production with pnpm build && pnpm serve. For the v1.0 documentation branch, use yarn install and yarn dev instead.
Pricing
Xtend UI is free and open source under the MIT License. The code is free to use in commercial and personal projects.
Alternatives
- DaisyUI — Another Tailwind CSS component library that uses pure CSS for components rather than JavaScript enhancement.
FAQ
Is Xtend UI free?
Yes, Xtend UI is released under the MIT License, so you can use it commercially and personally without licensing fees.
Does Xtend UI work with React?
Yes, the library is framework agnostic. Its vanilla JavaScript core can be embedded in React, Vue, Svelte, or any other JavaScript framework.
What browsers does Xtend UI support?
Supported browsers are those that support optional chaining, JavaScript modules, dynamic imports, IntersectionObserver, async functions, flexbox gap, WebP, variable fonts, CSS variables, and CSS grid. This covers modern browsers without requiring legacy polyfills.
How do I install Xtend UI?
You can clone the GitHub repository and run pnpm install to set up the project. The online setup guide is available at the official documentation.
