Nude UI

A collection of accessible, customizable, ultra-light web components

A work in progress. Try them out and provide feedback or move along and check back later.


Name Tag Description Type(s) Status
Switch <nd-switch> On/off toggle switch CSS-only Mature
Button Group <button-group> Group of buttons for selecting one or more values out of a set of options JS Mature
Cycle Toggle <cycle-toggle> Compact way to select one option from a group, click selects the next option JS Mature
Discrete meter <meter-discrete> Meter with discrete values shown as icons JS Mature
Rating <nd-rating> Like discrete meter, but editable via hovering and clicking JS Mature
HTML Demo <html-demo> Display demos of HTML content alongside their source code JS Mature
Image input <img-input> Input an image via URL, file upload, drag-and-drop, or pasting JS In incubation
Freeform text with presets <with-presets> A combination of a text input and a select element JS In incubation
Calendar <nd-calendar> Show dates on a calendar JS In incubation
Data bind <data-bind> Declaratively bind data from a source element to a target element JS In incubation

Wanna use them all?

This includes all components marked as mature:

import "";

Components still being incubated will need to be included individually.

Failed experiments

Do not use. These have serious flaws and are likely incomplete. They are included here only in case someone else wants to look into fixing their issues, as well as a warning for other wanderers going down the same path.