https://github.com/nudeui/nudeui

Lea's kitchen sink of form components. WIP. Try at your own risk or come back later.
https://github.com/nudeui/nudeui

forms web-components

Last synced: 3 months ago
JSON representation

Lea's kitchen sink of form components. WIP. Try at your own risk or come back later.

• Host: GitHub
• URL: https://github.com/nudeui/nudeui
• Owner: nudeui
• License: mit
• Created: 2021-10-15T12:23:42.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-29T19:36:44.000Z (5 months ago)
• Last Synced: 2024-06-04T16:34:50.964Z (5 months ago)
• Topics: forms, web-components
• Language: JavaScript
• Homepage: https://nudeui.com/
• Size: 144 KB
• Stars: 209
• Watchers: 5
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-web-components - Nude UI - Collection of accessible, customizable, ultra-light web components. (Guides / Examples)

README

        


# Nude UI

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](https://github.com/leaverou/nudeui) or move along and check back later.

## Components

| Name | Tag | Description | Type(s) | Status |

|------|-----|-------------|-------------------|--------|

| [Switch](elements/nd-switch) | `` | On/off toggle switch | CSS-only | Mature |

| [Button Group](elements/button-group) | `` | Group of buttons for selecting one or more values out of a set of options | JS | Mature |

| [Cycle Toggle](elements/cycle-toggle) | `` | Compact way to select one option from a group, click selects the next option | JS | Mature |

| [Discrete meter](elements/meter-discrete) | `` | Meter with discrete values shown as icons | JS | Mature |

| [Rating](elements/nd-rating) | `` | Like discrete meter, but editable via hovering and clicking | JS | Mature |

| [HTML Demo](elements/html-demo) | `` | Display demos of HTML content alongside their source code | JS | Mature |

| [Image input](elements/img-input) | `` | Input an image via URL, file upload, drag-and-drop, or pasting | JS | In incubation |

| [Freeform text with presets](elements/with-presets) | `` | A combination of a text input and a select element | JS | In incubation |

| [Calendar](elements/nd-calendar) | `` | Show dates on a calendar | JS | In incubation |

| [Data bind](elements/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:

```js

import "https://nudeui.com/elements/index.js";

```

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.

- [Drop down](elements/drop-down)