Features
Introduction

Overview of the main features.

Interactions and animations are not easy at all. Here's why Xtend UI is not the usual frontend library, it's designed to make hard javascript task effortless, that could take days or even months to implement and that needs various iterations and complex use case to do properly.

Accessibility

A11y standards with automatic Aria attributes and keyboard navigation.

For more info on accessibility practices used in Xtend UI see ARIA Design Pattern Examples, digitala11y.

Toggle

Toggle components have automatic a11y attributes and keyboard navigation, and they can be customized granularly, see drop accessibility, overlay accessibility, slider accessibility, toggle accessibility, tooltip accessibility.

Prefers Reduced Motion

See animation setup to disable css and js animations when the the user has activated "Prefers Reduced Motion".

Global

Javascript

  • Mount javascript code on nodes when they are added to DOM with vanilla html and js with Xt.mount.

  • Animate nodes with Tailwind CSS variants with Xt.on and Xt.off.

  • Customizable default options for all components of the same type with Xt.options.

Toggle

Toggle components share the same base code and features, they are used for all interactions that toggle a class and respond to it, they are drop, overlay, slider, toggle, tooltip.

Interaction

You can customize toggle components interaction in many ways, here's a simplified rundown of what's possible.

  • You can filter elements and targets dynamically.

  • You can group elements and targets to create many to many interactions between elements and targets.

  • You can specify min and max concurrent activations.

  • You can set the javascript event that respond to the interaction.

See drop interaction, overlay interaction, slider interaction, toggle interaction, tooltip interaction for more info.

Animation

You can animate all toggle components with Tailwind CSS variants or css or js, whatever you prefer or need to use. Toggle advanced animation system support also delay, queue, collapse.

See drop animation, overlay animation, slider animation, toggle animation, tooltip animation for more info.

Hash

Sometimes you need to save the state of a component in the location hash, to be linkable and more usable. With all the toggle components you can link the activation in the url hash.

See overlay hash, slider hash, toggle hash for more info.

Scrollto

Sometimes you need to automatically scroll to the activated nodes, you can use the Scrollto component in conjunction with any toggle component. It also integrates with the toggle hash interaction.

See scrollto toggle for more info.

Addon

Many advanced usage of toggle components are in the addon pages.

  • Slider notable addons are navigation sides, status. See slider addon for more info.

  • Tooltip notable addons are swap. See tooltip addon for more info.

Scroll

ScrollTrigger

Xtend UI uses gsap for javascript animations, not only that but it relies on Gsap ScrollTrigger to do all sort of interaction on page scroll.

See fade, sticky, parallax for more info.

Scrollto

ScrollTo is a plugin that manages interaction scroll, by setting it up it automatically reacts to hash links referring to ids on click and page load or can get triggered on any node, with automatic activation on scroll.

See scrollto for more info.

Stickyflow

Stickyflow is a plugin that enhance css sticky position by making it scroll the content also if overflowing the window.

See stickyflow for more info.

Core

All core components are primitive UI elements that promotes creativity with its support for complex design.

Card

The card component is used in many other components to display content inside a box. It's simple, modular and fully customizable. See card for more info.

Link

The link component has cssinjs customizable styles for automatic styling of blank html links. See link for more info.

List and Row

The list and row components are useful to space any element with margins or paddings, they also spaces vertically. When you want to space child element within flex they provide simple spacing classes for browsers that still don't support flex gap. See list, row for more info.

Media

The media component is useful to enhance html assets. It can be used with img, video, iframe tags to properly fit to aspect ratio, display a skeleton loader or just as a base standard markup for animating assets. See media for more info.

Typography

The typography component has cssinjs customizable styles for automatic styling of blank html content tags. See typography content for more info.

Addon

  • The media component has some useful pagespeed optimization addon iframe lazy loading, html5 video autoplay lazy and html5 video media matches. See media addon for more info.

Form

Xtend UI forms have variable size depending on parent font size so they are easy to make bigger or smaller.

They support various layout. See form layout for more info.

Addon

  • You can have custom validation on form submit with custom indications or notes and automatic scroll on errors. See form validation for more info.

  • You can have checkboxes and radio styled with complete freedom. See form checks custom for more info.

  • You can have automatic loader on all forms without changing a single line of html. See form loader for more info.

Other

Group Nav Tabs Toolbar

The group nav tabs and toolbar components are components that use list to display buttons, inputs and other content in a certain way. See group, nav, tabs, toolbar for more info.

Pagespeed optimizations

Themes

Xtend UI themes are focused on user experience, interaction and animation instead of design. See themes for more info.