Xtend UI is a collection of TailwindCSS UI components built with Vanilla JavaScript.
The library structures components as primitive, modular elements you can customize through Tailwind utility classes while the JavaScript layer manages interaction logic internally.
It runs framework-agnostic, so you can integrate it into vanilla HTML projects or any JavaScript framework
Features
🎨 Primitive Component Design: Components function as low-level UI elements like cards, lists, and media containers that nest and combine.
âš¡ Viewport-Based Code Splitting: JavaScript for each component loads and executes only when the component enters the viewport.
🎠Multiple Animation Approaches: You can animate components through Tailwind CSS variants, custom CSS transitions, or GSAP for complex sequences.
♿ Accessibility: Components generate ARIA attributes automatically and handle keyboard navigation.
🔧 Framework Agnostic: The library runs on vanilla HTML or integrates with React, Vue, Svelte, or other frameworks.
🎯 Extensible API: Interactive components expose a JavaScript API for custom behavior. You can hook into lifecycle events, modify internal state, and add custom interaction patterns.
🎬 GSAP-based Animations: Components support GSAP ScrollTrigger for scroll-based animations, sticky elements, and parallax effects.
Use Cases
- Interactive Marketing Sites: Build landing pages that require scroll-triggered animations and complex visual transitions.
- Accessible Web Applications: Create dashboards or tools that require strict adherence to keyboard navigation and screen reader support.
- Hybrid Stacks: Implement consistent UI components across projects that use different technologies, such as a legacy Rails app and a new Next.js marketing site.
- Performance-Critical Portals: Develop content-heavy sites where lazy loading and efficient resource management determine the user experience.
How to Use It
1. Install Xtend UI and its peer dependencies through npm.
npm install xtendui tailwindcss postcss postcss-import autoprefixer --save2. Configure PostCSS to process Tailwind and nested CSS. Create a postcss.config.js file in your project root.
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer')
],
};3. For Next.js or similar frameworks, use the object syntax instead.
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}4. Add the Xtend UI preset to your Tailwind configuration. Create a tailwind.config.js file and specify the content paths.
module.exports = {
presets: [
require('tailwindcss/defaultConfig'),
require('xtendui/tailwind.preset'),
],
content: [
'./node_modules/xtendui/src/**/*.mjs',
'./src/**/*.{html,js,jsx,ts,tsx}'
],
}5. Create your main CSS file with Tailwind directives. Import custom styles between components and utilities.
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./_custom.css";
@import "tailwindcss/utilities";6. Import the JavaScript components you need. The library exports named modules for each component type.
import { Xt } from 'xtendui'
import 'xtendui/src/toggle'7. If your bundler does not support package.json#exports, add the .mjs extension explicitly.
import 'xtendui/src/toggle.mjs'8. Add the xt-body class to your body element to activate global styles for animations, layout, and typography.
<body class="xt-body xt-links-default">
<!-- Your content -->
</body>9. For GSAP animations, install the library separately and initialize it according to the Xtend UI animation setup guide.
npm install gsap --save10. Configure Babel for browser compatibility. Install the required packages for polyfills.
npm install @babel/core @babel/preset-env core-js --save11. Create a babel.config.js file to transpile modern JavaScript features.
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: require('core-js/package.json').version
},
],
],
}12 Configure your bundler to transpile .mjs files from Xtend UI while excluding other node_modules. For Webpack with babel-loader:
{
test: /\.m?js$/,
exclude: {
and: [/node_modules/],
not: [/node_modules\/xtendui/],
},
use: {
loader: 'babel-loader',
},
},13. Define browser support in a .browserslistrc file at your project root.
Chrome >= 84
Edge >= 84
Safari >= 14.1
Firefox >= 74
Opera >= 70
iOS >= 14.5All UI Components
Toggle
Drop
Overlay
Slider
Toggle
Tooltip
Scroll
InfiniteScroll
Scrollto
Scrolltrigger
Stickyflow
Animation
Animation
MouseFollow
Ripple
Core
Button
Card
Icon
Link
List
Loader
Media
Row
Table
Typography
Form
Form
Groupnumber
Textareaautosize
Other
Group
Hero
Listing
Nav
Tabs
Toolbar
Related Resources
- Tailwind CSS: Utility-first CSS framework that Xtend UI extends with custom component classes and variants.
- GSAP: JavaScript animation library used for complex animations and scroll-triggered effects in Xtend UI components.
- Headless UI: Unstyled component library for React and Vue that takes a similar primitive approach to UI composition.
- Radix UI: Low-level UI primitives with accessibility built in, comparable to Xtend UI’s component philosophy.
FAQs
Q: Can I use Xtend UI with React or Vue?
A: Yes. The library runs framework-agnostic on vanilla JavaScript. You can integrate components into React, Vue, Svelte, or any other framework
Q: How do I customize component styles?
A: Apply Tailwind utility classes directly to component elements.
Q: Does viewport loading affect SEO or initial render?
A: JavaScript loads when components enter the viewport, but HTML renders immediately. Search engines see the complete markup. The viewport detection only defers JavaScript execution to improve interaction metrics and reduce initial bundle overhead.
Q: Can I use Xtend UI without GSAP?
A: Yes. GSAP integration is optional. You can animate components through Tailwind CSS variants or custom CSS transitions. Install GSAP only if you need complex scroll-triggered animations or timeline-based sequences.
