Plain Elements — HTML showcase

Component showcase

All components, all options

A single static page to verify every Plain Elements primitive and its configuration options. Styled with shadcn-inspired tokens. Custom events appear in the log at the bottom.

Tabs

Orientation, activation mode, loop, disabled triggers, indicator, and data-tabs-value.

Default — horizontal, automatic activation, loop enabled, indicator

Profile settings — click tabs or use arrow keys to move focus.
Security settings — panels switch on focus in automatic mode.
Notification preferences.

data-tabs-orientation="vertical", data-tabs-activation="manual", data-tabs-loop="false"

Use Up/Down to move focus, then Enter or Space to activate.
Privacy settings.
Focus does not wrap because data-tabs-loop is false.

Disabled trigger — roving focus skips the middle tab

Press Right Arrow — focus skips the disabled Building tab.
This panel cannot be selected while its tab is disabled.
Shipped features.

Accordion

Native <details>, managed items, single/multiple open, disabled, hidden-until-found, and programmatic API.

Native single-open — shared name on <details>

How long does shipping take?

Standard shipping arrives within three to five business days.

Can I return an item?

Unused items can be returned within 30 days.

Native multiple open — no name, plus data-accordion-disabled

Shipping

Multiple items can stay open because these details have no name.

Returns

Unused items can be returned within 30 days.

Warranty (disabled)

Warranty information.

Managed — data-accordion-single, data-accordion-hidden-until-found, height animation

Standard shipping usually arrives within three to five business days.

Unused items can be returned within 30 days of delivery.

All products include a one-year limited warranty.

Programmatic API — open(), value = []

Both details share a name, so native HTML keeps this example single-open.

Shipping

Standard shipping takes three to five business days.

Returns

Unused items can be returned within 30 days.

Collapsible

Default, animated height, data-collapsible-open, data-collapsible-disabled, and hidden-until-found.

Basic disclosure

Plain Elements provides accessible, unstyled UI primitives.

Height animation — --collapsible-panel-height CSS variable

alien-bean-pasta

wild-irish-burrito

horse-battery-staple

Initially open — data-collapsible-open

Next invoice: April 1 — $49.00

Disabled — data-collapsible-disabled

This section cannot be toggled.

Find-in-page — data-collapsible-hidden-until-found

Try find-in-page for "quarterly review".

Dialog

Internal/external triggers, backdrop dismiss, alert dialog, nested dialogs, and data-dialog-dismiss.

Internal trigger

Basic modal with title, description, and close control.

Example dialog

A native modal dialog enhanced with trigger wiring and ARIA sync.

External trigger

data-dialog-trigger="settings-dialog" targets host by id.

Settings

This dialog is opened by a trigger outside the pe-dialog host.

Backdrop dismiss

data-dialog-dismiss on <dialog>

Dismissable dialog

Pointer down on the backdrop closes this dialog.

Alert dialog

role="alertdialog" with method="dialog" form

Delete this item?

This action cannot be undone.

Nested dialogs

Child pe-dialog inside parent surface; Esc closes child first.

Parent dialog

Parent description text.

Child dialog

Child description text.

Tooltip

Sides, align, delay, close-delay, delay group, external triggers, and arrow.

Internal trigger with arrow

External triggers — shared tooltip, data-tooltip-align="start", data-tooltip-delay, data-tooltip-close-delay

All sides with arrow — data-tooltip-side, data-tooltip-arrow

Delay group — data-tooltip-delay-group, data-tooltip-skip-delay

Popover

Offset, sides, align, external trigger, nested popovers, arrow, and close control.

Internal trigger — data-popover-offset, arrow, title, description

External trigger — data-popover-side="top", data-popover-align="end"

All sides with arrow — data-popover-side, data-popover-arrow

Nested popover — data-popover-side="right", data-popover-align="start"

Event log

Custom events from all components above.