Vanilla UI

Headless UI Utilities for vanilla JavaScript.

Features:

• lightweight
• no dependencies
• no styles
• no build tools
• no package managers

Currently, only the dialog component is available.

Installation

<script src="https://unpkg.com/@tknf-labs/[email protected]/dist/umd/dialog.min.js"></script>

Usage

<div class="dialog">
  <button type="button" class="dialog__trigger"></button>
  <div class="dialog__overlay"></div>
  <div class="dialog__content">
    <button type="button" class="dialog__close"></button>
    <h2 class="dialog__title">Dialog</h2>
    <p class="dialog__description">This is a dialog.</p>
  </div>
</div>

const dialog = new Dialog(".dialog");

Development

On production use files (JS and CSS) only from dist/ folder, there will be the most stable versions, src/ folder is only for development purpose.

Development build

Install all dependencies:

$ pnpm install

Add build development:

$ pnpm run build

Running playground

To run the playground:

$ pnpm run serve