Quick start

Install

npm install plain-elements

For environments without a build step (CMS, static sites), load the IIFE bundle from jsDelivr:

<script defer src="https://cdn.jsdelivr.net/npm/plain-elements@latest/dist/plain-elements.iife.js"></script>

Register components

Importing the package registers the custom elements:

import "plain-elements";

Or load only what you need:

import "plain-elements/dialog";
import "plain-elements/popover";
import "plain-elements/tabs";
import "plain-elements/accordion";
import "plain-elements/collapsible";
import "plain-elements/tooltip";

First example

Once plain-elements/dialog is loaded, <pe-dialog> is registered as a custom element, and Dialog works as soon as you add the required elements and data-* attributes to your HTML.

If you installed from npm (ESM):

import "plain-elements/dialog";

If you load it with a script tag (IIFE, for environments without a build step):

<script defer src="https://cdn.jsdelivr.net/npm/plain-elements@latest/dist/plain-elements.iife.js"></script>

Either way, the custom element is registered as soon as it loads, so your HTML looks the same:

<pe-dialog>
  <button type="button" data-dialog-trigger>Open dialog</button>

  <dialog>
    <h2 data-dialog-title>Example dialog</h2>
    <p data-dialog-description>
      A native modal dialog enhanced with trigger wiring and ARIA sync.
    </p>
    <button type="button" data-dialog-close>Close</button>
  </dialog>
</pe-dialog>

Clicking the trigger opens the dialog with showModal() and moves focus into it. Closing the dialog with the close button or Escape returns focus to the trigger. For other components, see the component reference.

Recommended CSS

Hosts use display: contents so they do not affect layout:

pe-dialog,
pe-popover,
pe-tabs,
pe-accordion,
pe-collapsible,
pe-tooltip {
  display: contents;
}

Style the native elements and documented data-* hooks directly. See Styling.

Next steps

• Choose a primitive
• Component reference
• Browser support