Ktui

npm install @keenthemes/ktui

import { KTComponents } from '@keenthemes/ktui';
import '@keenthemes/ktui/dist/styles.css';
KTComponents.init();

// Global init
KTComponents.init();

// Per-component re-init after dynamic content
import { KTModal } from '@keenthemes/ktui';
KTModal.init();

<!-- Toggle button -->
<button data-kt-modal-toggle="#my-modal">Open Modal</button>

<!-- Modal root -->
<div data-kt-modal="true" id="my-modal">
  <div class="kt-modal-content">
    <h2>Hello</h2>
    <button data-kt-modal-dismiss="true">Close</button>
  </div>
</div>

<div data-kt-dropdown="true">
  <button data-kt-dropdown-toggle="true">Menu</button>
  <div data-kt-dropdown-menu="true" class="hidden">
    <a data-kt-dropdown-item="true" href="#">Item 1</a>
    <a data-kt-dropdown-item="true" href="#">Item 2</a>
  </div>
</div>

<!-- JS config: { zindex: '100', backdrop: true, persistent: true } -->
<div data-kt-modal="true"
     data-kt-modal-zindex="100"
     data-kt-modal-backdrop="true"
     data-kt-modal-persistent="true">

.my-modal {
  --kt-modal-zindex: 200;
  --kt-modal-backdrop: true;
}

// Get existing instance
const instance = KTModal.getInstance(element);

// Get or create
const instance = KTModal.getOrCreateInstance(element, config);

// Instance methods
instance.show();
instance.hide();
instance.toggle();
instance.isOpen();
instance.dispose();

// Events
const eventId = instance.on('show', (payload) => { /* ... */ });
instance.off('show', eventId);

<button data-kt-modal-toggle="#myModal">Open</button>
<div id="myModal" data-kt-modal="true" class="hidden">
  <div class="kt-modal-content">
    <button data-kt-modal-dismiss="true">×</button>
    <p>Content</p>
  </div>
</div>

const modal = KTModal.getInstance(document.getElementById('myModal'));
modal.show();
modal.hide();
modal.isOpen(); // boolean
modal.getTargetElement(); // the toggle button that opened it

<div data-kt-dropdown="true">
  <button data-kt-dropdown-toggle="true">Click me</button>
  <div data-kt-dropdown-menu="true" class="hidden">
    <a data-kt-dropdown-item="true" href="#">Option 1</a>
    <a data-kt-dropdown-item="true" href="#">Option 2</a>
  </div>
</div>

const dd = KTDropdown.getInstance(el);
dd.show();
dd.hide();
dd.toggle();
dd.isOpen();
dd.disable(); // prevent interaction
dd.enable();

<button data-kt-drawer-toggle="#myDrawer">Open Drawer</button>
<div id="myDrawer" data-kt-drawer="true" class="hidden">
  <div class="kt-drawer-content">
    <button data-kt-drawer-dismiss="true">×</button>
    <p>Drawer content</p>
  </div>
</div>

<button data-kt-collapse-toggle="#myCollapse">Toggle</button>
<div id="myCollapse" data-kt-collapse="true" class="hidden">
  Collapsed content
</div>

<div data-kt-tabs="true">
  <div data-kt-tabs-toggle="true" data-kt-tab="#tab1">Tab 1</div>
  <div data-kt-tabs-toggle="true" data-kt-tab="#tab2">Tab 2</div>
</div>
<div id="tab1">Content 1</div>
<div id="tab2" class="hidden">Content 2</div>

<button data-kt-tooltip="true" data-kt-tooltip-content="Hello!">
  Hover me
</button>

import { KTToast } from '@keenthemes/ktui';

// Basic usage
KTToast.show({ message: 'Saved!', variant: 'success' });

// Full options
KTToast.show({
  message: 'Item deleted',
  variant: 'error',
  appearance: 'solid',      // 'solid' | 'outline' | 'light'
  size: 'md',               // 'sm' | 'md' | 'lg'
  position: 'top-end',      // 'top-end' | 'top-center' | 'top-start' |
                            // 'bottom-end' | 'bottom-center' | 'bottom-start' |
                            // 'middle-end' | 'middle-center' | 'middle-start'
  duration: 5000,           // ms, auto-dismiss
  important: false,         // if true, no auto-dismiss
  progress: true,           // show progress bar
  pauseOnHover: true,       // pause timer on hover
  dismiss: true,            // show close button
  icon: '<svg>...</svg>',   // leading icon HTML
  action: {
    label: 'Undo',
    onClick: (id) => { /* ... */ },
    className: 'btn btn-sm',
  },
  cancel: {
    label: 'Cancel',
    onClick: (id) => { /* ... */ },
  },
  beep: true,               // play notification sound
  onAutoClose: (id) => {},
  onDismiss: (id) => {},
});

// Global config
KTToast.config({
  position: 'bottom-end',
  duration: 4000,
  maxToasts: 5,
  offset: 15,
  gap: 10,
});

KTToast.show({
  content: document.getElementById('my-toast-template'),
  // or: content: () => document.createElement('div'),
  // or: content: '<div>HTML string</div>',
});