A collection of accessible, customizable, ultra-light web components
- Using built-in controls whenever possible, web components when JS and/or extra elements are needed
- Highly customizable
- Tiny (most are ~1KB minified & compressed)
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 |
This includes all components marked as mature:
import "https://nudeui.com/elements/index.js";Components still being incubated will need to be included individually.
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.