uiloos makes creating component libraries easier and faster

uiloos is a headless UI library which provides common components without any styling. You create the design and "uiloos" provides the behavior.

PSST: the above animation was created using the Typewriter component! Compose your animation here.

Getting started

Pricing

Behavior vs look and feel

You handle the look and feel of your application / website and let uiloos handle the behavior. Spend more time configuring behavior instead of coding it, try it out yourself:

const carousel = new ActiveList (

{

contents:

[ 1, 2, 3, 4, 5 ]

activeIndexes:

[ 0 ]

autoPlay: {

duration :

stopsOnUserInteraction:

} ,

isCircular:

cooldown: 500

} ,

) ;

( carousel , event ) => {

This is a callback function which informs you of changes inside of the ActiveList. In vanilla JavaScript you manipulate the DOM here or re-render the DOM.

When using a framework such as Vue, React or Angular, you will not need this callback because the framework will handle the DOM manipulation for you.

}

) ;

Snow owl

The snowy owl (Bubo scandiacus), also known as the polar owl, the white owl and the Arctic owl, is a large, white owl of the true owl family. Snowy owls are native to the Arctic regions.

Photo by Doug Kelley
Tawny owl

The tawny owl (also called the brown owl; Strix aluco) is commonly found in woodlands across much of Eurasia and North Africa, and has 11 recognized subspecies.

Photo by Kai Wenzel
Barn owl

The barn owl (Tyto alba) is the most widely distributed species of owl in the world and one of the most widespread of all species of birds, being found almost everywhere in the world.

Photo by James Lee
Burrowing owl

The burrowing owl (Athene cunicularia) is a small, long-legged owl. Burrowing owls nest and roost in burrows, such as those excavated by prairie dogs.

Photo by Ray Hennessy
Northern hawk-owl

The northern hawk-owl or northern hawk owl (Surnia ulula) is a medium-sized true owl of the northern latitudes. It is one of the few owls that is neither nocturnal nor crepuscular.

Photo by Erik Karits

Owl 1 of 5

Click on the buttons above to trigger a flash message of that type.

Higher priority (the lower the number the higher the priority) messages are shown above lower priority messages.

const flashMessageChannel = new ViewChannel ();

export function infoFlashMessage ( text ) {

flashMessageChannel .present({

data: {

id: Math.random(),

text,

type: 'info'

priority: ,

autoDismiss: {

duration: ,

result: undefined

}

});

}

const datePicker = new DateGallery (

{

mode: ,

firstDayOfWeek: ,

numberOfFrames: ,

maxSelectionLimit: ,

maxSelectionLimitBehavior:

} ,

) ;

( datePicker , event ) => {

This is a callback function which informs you of changes inside of the DateGallery. In vanilla JavaScript you manipulate the DOM here or re-render the DOM.

When using a framework such as Svelte, Vue or React, you will not need this callback because the framework will handle the DOM manipulation for you.

}

) ;