doticca-ui

A framework-agnostic UI suite

doticca-ui is a small suite of production-grade interface components written in plain JavaScript. It ships a DateTimePicker and a SelectPicker, both built on one shared core and themed entirely through CSS custom properties.

Vanilla JS Zero dependencies Touch-first Token-themed Accessible

What it is

Every component is a self-contained class you point at an existing <input> or <select>. There is no virtual DOM, no build step required, and nothing to configure globally. Drop in a stylesheet, a script, and one line of JavaScript, and the element is enhanced in place while still submitting normally inside a form.

Key principles

Framework-agnostic

Works in React, Vue, Svelte, or no framework at all. It only touches the DOM node you hand it.

No dependencies

The entire suite is self-contained. The bundle you load is the only code that runs.

Touch-first UX

Desktop gets a popover; touch devices get a native-feeling bottom sheet with inertial wheels automatically.

Deterministic behavior

Explicit value models, predictable events, and tracked listeners that guarantee zero leaks on destroy.

Supported components

  • DateTimePicker — date, time, datetime, and range modes.
  • SelectPicker — single, multi, searchable, grouped, virtualized, and async.

Quick preview

These are live components, running the exact library this site documents. Try them, then resize to a phone width to see the touch sheet.

DateTimePicker · mode: "date"
SelectPicker · searchable

Where to next

Getting started

Install the library and render your first picker in under a minute.

Architecture

How the shared core, overlay system, and input model fit together.