GitHub

Docs / JavaScript

JavaScript

What the scripts do — and what still works without them.

Plain scripts, data hooks

A part’s JS is a single plain script: no imports, no framework, no build. It finds its root by a data attribute (data-dp, data-combo, data-tags…) and keeps its state in the DOM — classes and ARIA attributes you can inspect. Copy it next to the HTML and it runs.

In the one-file bundle each script is wrapped in its own function scope, so parts never collide with each other or with your code.

What works with no JavaScript

More than you might expect. Accordion is native details. Rating and Segmented are radio inputs. Switch and Checkbox are checkboxes. Marquee, Aurora, Beam Border and the charts are CSS and SVG. These parts are complete with the script tag deleted.

Parts that do need JS say so by having a JS tab — and the honest ones degrade: Tag Input falls back to a plain text field, Combobox to a text input, the Date Picker to a text input.

Behavior contracts

Interactive parts document their keyboard behavior on their own page, under Accessibility. The shared rules: Escape closes what is open and returns focus, arrows move within a part, and nothing ever traps the pointer. Motion parts check prefers-reduced-motion once and honor it.

If a part’s script fails to load, the page still renders — behavior is layered on markup, never generated by it (the Date Picker calendar grid is the one exception, and it is labelled as such).

More docs

Getting Started · Theming · Dark Mode · Accessibility · Installation · Guide: Building a Dashboard · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · FAQ · Changelog