Xtendui

<p></p> <p align="center"> <a href="https://xtendui.github.io/xtendui/" aria-label="Xtend UI" style="display: inline-block;"> <img src="https://raw.githubusercontent.com/xtendui/xtendui/master/public/logo-bg.svg" loading="eager" alt="Xtend UI" width="200"> </a> </p> <p align="center"> <a href="https://xtendui.github.io/xtendui/intro" target="_blank">Intro</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="https://xtendui.github.io/xtendui/components" target="_blank">Components</a>&nbsp;&nbsp;·&nbsp;&nbsp;<a href="https://xtendui.github.io/xtendui/themes" target="_blank">Themes</a> <br/><br/> <a href="https://github.com/xtendui/xtendui/blob/master/LICENSE.txt" target="_blank" aria-label="License" style="display: inline-block;"> <img src="https://img.shields.io/npm/l/xtendui.svg?style=flat-square" alt="License" loading="eager"> </a> <a href="https://twitter.com/intent/tweet?text=Xtend%20UI%20a%20new%20powerful%20frontend%20library%20of%20tailwind%20components%20enhanced%20by%20vanilla%20js&url=https://xtendui.github.io/xtendui/&via=xtendui&hashtags=xtendui" target="_blank" aria-label="Tweet" style="display: inline-block;"> <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" loading="eager"> </a> <a href="https://github.com/xtendui/xtendui" target="_blank" aria-label="Star" style="display: inline-block;"> <img src="https://img.shields.io/github/stars/xtendui/xtendui?style=social" alt="Star" loading="eager"> </a> </p>

Custom UI made easy with simplicity and total freedom

Xtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations. Check out Xtend UI features.

• Css with Tailwind CSS and Postcss
• Some animations and interactions with Gsap
• Positioning with Popperjs
• Focus trap with Focus Trap
• Docs with Nextjs
• Release with Semantic Release
• Polyfill with Babel and Core Js
• Icons with Feather Icons
• Hosting with Github Pages and Cloudflare

Supported browsers are browsers that supports mainly optional chaining, JavaScript modules, es6-module, es6-module-dynamic-import, IntersectionObserver, async, flexbox gap, webp, Variable fonts, css variables, css grid.

Setup

For a complete css and js setup guide visit online setup page or github setup page.

Frameworks

Xtend UI is a framework agnostic vanilla javascript library, you can use inside any javascript framework.

Contributing

Read our contributing docs before submitting a pull request.

LLMS

• llms.txt
• llms-full.txt

Documentation

• Clone the repository git clone https://github.com/xtendui/xtendui.git
• Install required npm packages with pnpm install
• Use pnpm dev to serve a develop version with watch
• Use pnpm build && pnpm serve to serve a production version

Documentation v1.0

• Clone the repository git clone https://github.com/xtendui/xtendui.git
• Switch branch with git checkout 1.0-dev
• Install required npm packages with yarn install
• Use yarn dev to serve a develop version with watch
• Use yarn build && yarn serve to serve a production version

Sponsors

<a href="https://www.webgriffe.com/" target="_blank" rel="noopener" aria-label="Webgriffe" style="display: inline-block;"> <img src="https://raw.githubusercontent.com/xtendui/xtendui/master/public/support/webgriffe.svg" loading="eager" alt="Webgriffe" width="130px"> </a> &nbsp;&nbsp;

Copyright and License

Copyright 2017-2026 Riccardo Caroli.

Code licensed MIT.

Docs licensed CC-BY-4.0