- v0.1.1 -

Headless UI components without writing
a single line of JavaScript.


All you need is attaching rolls and behaviors to your styled elements by using data-zl.

Above tabs are working by below code.

<div data-zl="tab-list">
  <button type="button" data-zl="tab-item target-[#tab1] default active-style-[active]">
    Tab 1
  <button type="button" data-zl="tab-item target-[#tab2] active-style-[active]">
    Tab 2
<div id="tab1">
  <!-- Tab1 Content Here -->
<div id="tab2" zl-cloak>
  <!-- Tab2 Content Here -->
<button type="button" data-zl="modal-toggle target-[#modal1]">
  Modal Open
<div id="modal1" data-zl="modal-backdrop" zl-cloak>
  <div data-zl="modal-content move-down-md">
    <!-- Content Here -->
    <button data-zl="modal-dismiss">Cancel</button>

Modal Here!

  • Dismiss by clicking outside of modal content or dismiss button.
  • Scroll lock by default.