Alpine.js

XWUI driven by Alpine state.

One x-data scope wraps the whole page. Every XWUI input below dispatches a change event into Alpine; the store updates; every chip bound with x-text rerenders. The hero emoji, the bound display chips · all driven by Alpine reactivity, around real XWUI Custom Elements.

Alpine state snapshot

these chips re-render whenever any input below changes

Picked color

Picked date

Knob value

Rating

OTP entered

Files queued

Charts

xwui-chart-line · xwui-chart-area · xwui-chart-bar

Inputs · driven through Alpine

every change updates `x-data` and the snapshot above re-renders

Color picker

Date picker (calendar)

Emoji picker

Rating

Knob

OTP

Signature pad

Upload (dropzone)

Scoped styles

these two panels override the global style locally

global cycler in the header keeps controlling the rest of the page

Panel A primary CTA + chip

Panel B switch + segmented

Navigation primitives

tabs · breadcrumbs · pagination