<div class="collapse">
  <div class="collapse-header" onclick="collapseToggle(this)">
    Title <span class="collapse-icon"></span>
  </div>
  <div class="collapse-body">Content</div>
</div>

<div class="accordion">
  <div class="collapse">
    <div class="collapse-header" onclick="accordionToggle(this)">Section 1</div>
    <div class="collapse-body">...</div>
  </div>
  <div class="collapse">
    <div class="collapse-header" onclick="accordionToggle(this)">Section 2</div>
    <div class="collapse-body">...</div>
  </div>
</div>

<div class="dropdown">
  <button class="btn" onclick="dropdownToggle(this.parentElement)">Menu</button>
  <div class="dropdown-menu">
    <a class="dropdown-item">Item</a>
  </div>
</div>

<div class="tab-wrap">
  <div class="tab-nav tab-nav-pills">
    <button class="tab-btn is-active" onclick="tabSwitch(this)">Tab 1</button>
    <button class="tab-btn" onclick="tabSwitch(this)">Tab 2</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel is-active">Content 1</div>
    <div class="tab-panel">Content 2</div>
  </div>
</div>

<!-- Trigger -->
<button onclick="openModal('my-modal')">Open</button>

<!-- Modal -->
<div id="my-modal" class="lib-modal-overlay"
     onclick="if(event.target===this)closeModal(this)">
  <div class="lib-modal-box">
    <button class="lib-modal-close"
      onclick="closeModal(document.getElementById('my-modal'))">✕</button>
    <!-- .is-success .is-error .is-warning .is-info -->
  </div>
</div>

<!-- Required container (place anywhere in body) -->
<div id="lib-toast-container"></div>

// Usage
showToast('Saved!', 'success');
showToast('Something went wrong', 'error', 3000);
showToast('Info message', 'primary');

// Scroll to slide index 2 programmatically
const car = document.querySelector('.carousel');
carouselGo(car, 2);

// Re-init after dynamic content (e.g. AJAX)
initCarousels();

<!-- Same markup, same .is-open class — Alpine just toggles it -->
<div class="collapse" x-data="{ open: false }" :class="{ 'is-open': open }">
  <div class="collapse-header" @click="open = !open">
    Title <span class="collapse-icon"></span>
  </div>
  <div class="collapse-body">Content</div>
</div>

<!-- Exclusive accordion — one item open at a time -->
<div class="accordion" x-data="{ active: null }">
  <div class="collapse" :class="{ 'is-open': active === 1 }">
    <div class="collapse-header" @click="active = active === 1 ? null : 1">
      Section A <span class="collapse-icon"></span>
    </div>
    <div class="collapse-body">Content A</div>
  </div>
</div>

<!-- Exclusive accordion: one shared index instead of collapseToggle() -->
<div class="accordion" x-data="{ active: null }">
  <div class="collapse" :class="{ 'is-open': active === 0 }">
    <button class="collapse-header" @click="active = active === 0 ? null : 0">
      First question <span class="collapse-icon"></span>
    </button>
    <div class="collapse-body">Answer one.</div>
  </div>
  <div class="collapse" :class="{ 'is-open': active === 1 }">
    <button class="collapse-header" @click="active = active === 1 ? null : 1">
      Second question <span class="collapse-icon"></span>
    </button>
    <div class="collapse-body">Answer two.</div>
  </div>
</div>

<!-- Or the njx-alpine.js preset: x-data="njxAccordion" → toggle(i) / isOpen(i) -->

<div class="tab-wrap" x-data="{ tab: 0 }">
  <div class="tab-nav">
    <button class="tab-btn" :class="{ 'is-active': tab === 0 }" @click="tab = 0">Tab 1</button>
    <button class="tab-btn" :class="{ 'is-active': tab === 1 }" @click="tab = 1">Tab 2</button>
  </div>
  <div class="tab-content">
    <div class="tab-panel" :class="{ 'is-active': tab === 0 }">Content 1</div>
    <div class="tab-panel" :class="{ 'is-active': tab === 1 }">Content 2</div>
  </div>
</div>

<div class="dropdown" x-data="{ open: false }"
     :class="{ 'is-open': open }" @click.outside="open = false">
  <button class="btn btn-ghost btn-sm" @click="open = !open">
    Menu <span class="dropdown-arrow"></span>
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item" @click="open = false">Item</a>
  </div>
</div>

<div x-data="{ open: false }" @keydown.escape.window="open = false">
  <button class="btn btn-primary" @click="open = true">Open</button>

  <div class="lib-modal-overlay" :class="{ open }" @click.self="open = false">
    <div class="lib-modal-box is-primary">
      <button class="lib-modal-close" @click="open = false">✕</button>
      <div class="lib-modal-title">Title here</div>
      <div class="lib-modal-actions">
        <button class="btn btn-primary btn-sm" @click="open = false">Confirm</button>
        <button class="btn btn-ghost btn-sm" @click="open = false">Cancel</button>
      </div>
    </div>
  </div>
</div>

<div x-data="{
  toasts: [], id: 0,
  fire(msg, type) {
    const t = { id: ++this.id, msg, type };
    this.toasts.push(t);
    setTimeout(() => this.dismiss(t.id), 2200);
  },
  dismiss(id) { this.toasts = this.toasts.filter(t => t.id !== id); }
}">
  <button class="btn btn-primary btn-sm" @click="fire('Saved!', 'success')">Success</button>
  <button class="btn btn-ghost btn-sm" @click="fire('Error occurred', 'error')">Error</button>

  <div id="lib-toast-container">
    <template x-for="t in toasts" :key="t.id">
      <div class="lib-toast" :class="'lib-toast-' + t.type"
           @click="dismiss(t.id)" x-text="t.msg"></div>
    </template>
  </div>
</div>

<!-- Track position is derived state — one :style binding -->
<div class="js-carousel-wrap" x-data="{ i: 0, n: 3 }">
  <div class="js-carousel">
    <div class="js-carousel-track"
         :style="'transform: translateX(-' + i * 100 + '%)'">
      <div>Slide 1</div><div>Slide 2</div><div>Slide 3</div>
    </div>
  </div>
  <button class="js-carousel-btn js-prev" @click="i = (i - 1 + n) % n">‹</button>
  <button class="js-carousel-btn js-next" @click="i = (i + 1) % n">›</button>
  <div class="js-dots">
    <template x-for="d in n" :key="d">
      <button class="js-dot" :class="{ 'is-active': i === d - 1 }" @click="i = d - 1"></button>
    </template>
  </div>
</div>

<!-- Or the njx-alpine.js preset: x-data="njxCarousel(0, 4000)" — autoplay, hover pause, auto slide count -->

<!-- Dark/light toggle with localStorage — one line of state -->
<button class="btn btn-ghost btn-sm"
        x-data="{ t: document.documentElement.dataset.theme || 'dark' }"
        @click="t = t === 'dark' ? 'light' : 'dark';
                document.documentElement.dataset.theme = t;
                localStorage.setItem('theme', t)"
        x-text="t === 'dark' ? '☀ Light' : '🌙 Dark'"></button>

<div class="card card-glass p-6">
  <h3 class="text-gradient-primary">Card Title</h3>
  <p class="text-muted mt-2">Description text...</p>
  <div class="flex gap-4 mt-6">
    <button class="btn btn-primary btn-sm">Action</button>
    <button class="btn btn-outline btn-sm">Cancel</button>
  </div>
</div>

<div class="field">
  <label class="field-label">Email</label>
  <input class="inp inp-error" type="email" placeholder="[email protected]">
  <span class="field-error-msg">Invalid email address</span>
</div>
<div class="field">
  <label class="field-label">Password</label>
  <input class="inp inp-success" type="password">
  <span class="field-success-msg">Password accepted</span>
</div>

<div x-data="{ open: true }" @keydown.escape.window="open = false">
  <div class="lib-modal-overlay" :class="{ open }" @click.self="open = false">
    <div class="lib-modal-box is-success">
      <span class="lib-modal-icon">✓</span>
      <div class="lib-modal-title">Success!</div>
      <div class="lib-modal-text">Operation completed</div>
      <div class="lib-modal-actions">
        <button class="btn btn-success" @click="open = false">OK</button>
      </div>
    </div>
  </div>
</div>