About

Plain Elements is a Web Components library that provides unstyled, accessible UI primitives. It includes six components — Dialog, Popover, Tooltip, Tabs, Accordion, and Collapsible — each of which adds interaction behavior and ARIA attributes to HTML you write yourself.

Design principles

• Platform APIs: Dialog is built on the native <dialog> element and showModal(), Accordion defaults to <details> / <summary>, and Popover uses the Popover API. Where the browser already provides accessibility and interaction behavior, the library reuses it instead of reimplementing it—keeping the implementation smaller.
• Light DOM: Plain Elements does not use Shadow DOM. Every element can be styled with normal CSS selectors or utility classes such as Tailwind.
• Authored markup: The library does not create, wrap, move, reorder, or remove elements. At initialization it only adds data-* attributes, aria-* attributes, IDs within a documented scope, tabindex, and the minimal inline styles required for positioning.
• Progressive enhancement: Markup stays meaningful as native HTML before JavaScript loads.

What it provides and what it does not

Plain Elements implements accessibility and interaction behavior: ARIA attribute synchronization, keyboard interaction, focus management, data-* state attributes, and custom events where needed.

It does not provide:

• Visual styling. No CSS ships with the library, so colors, spacing, and animation are entirely up to you.
• Generated wrappers or portals. The DOM structure stays exactly as you author it.
• Framework adapters for React, Vue, Svelte, or similar. Components are plain Web Components, so no dedicated wrapper packages are provided.

Distribution

The library builds to both ESM and IIFE and ships as an npm package. ESM targets bundlers and environments that support type="module"; IIFE works with a single <script> tag or via jsDelivr CDN, which suits CMSs and other environments without a build step. Either format registers the custom elements as soon as it loads.

Intended use

The primary use cases are general websites — CMS-driven sites, landing pages, corporate sites, and static sites. Plain Elements is also intended for use in web applications and is built with a stable public API and test coverage to support that. It works as a plain custom element inside React, Vue, or other framework-based projects. See the Quick start to begin.