KtUI

https://ktui.io/docs
Admin
KtUI is an open-source collection of JavaScript UI components styled with Tailwind CSS, enabling...
Tokens:322,649
Snippets:1,193
Trust Score:4.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### KTRangeSlider Initialization Example

Source: https://ktui.io/docs/range-slider

Example demonstrating how to initialize and use KTRangeSlider.

```javascript
KTRangeSlider.init();

const el = document.querySelector('[data-kt-range-slider]');
const slider = KTRangeSlider.getInstance(el);
console.log(slider?.getValue());
```

--------------------------------

### Example Usage

Source: https://ktui.io/docs/toast

Demonstrates how to use KTToast.show(), KTToast.hide(), and KTToast.clearAll().

```APIDOC
## Example Usage

```javascript
// Show a toast
const toast = KTToast.show({
  message: 'Profile saved',
  variant: 'success',
  duration: 3000,
  action: {
    label: 'Undo',
    onClick: (id) => {
      console.log('Undo clicked', id);
    }
  }
});
 
// Hide a toast
KTToast.hide(toast.id);
 
// Clear all toasts
KTToast.clearAll();
```
```

--------------------------------

### Initialize and Use KTThemeSwitch in TypeScript

Source: https://ktui.io/docs/theme-switch

Import and utilize KTThemeSwitch, its types, and configuration options for typed development. This example shows getting an instance, retrieving the current mode, setting a new mode, and creating a new instance with options.

```typescript
import {
  KTThemeSwitch,
  type KTThemeSwitchConfigInterface,
  type KTThemeSwitchInterface,
  type KTThemeSwitchModeType,
} from '@keenthemes/ktui';

const theme: KTThemeSwitchInterface = KTThemeSwitch.getInstance();
theme.getMode();
theme.setMode('dark' as KTThemeSwitchModeType);

const options: KTThemeSwitchConfigInterface = { mode: 'system' };
const root = document.body;
const instance: KTThemeSwitchInterface = new KTThemeSwitch(root, options);
```

--------------------------------

### KTTabs Static Utilities Example

Source: https://ktui.io/docs/tabs

Example of using static utility methods for KTTabs initialization.

```javascript
// Initialize all tabss
KTTabs.init();

// Initialzie pending tabss
KTTabs.createInstances();

// Get tabs object
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);
```

--------------------------------

### Install KtUI via NPM

Source: https://ktui.io/docs/installation

Run this command in your terminal to install the KtUI package. Ensure you have Node.js and a working Tailwind CSS project.

```bash
npm i @keenthemes/ktui
```

--------------------------------

### KTTabs Event Handling Example

Source: https://ktui.io/docs/tabs

Example of how to handle 'show' and 'shown' events for the KTTabs component.

```javascript
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);

tabs.on('show', (detail) => {
  detail.cancel = true;
  console.log('show action canceled');
});

tabs.on('shown', () => {
  console.log('shown event');
});
```

--------------------------------

### Toggling Multiple Drawers

Source: https://ktui.io/docs/drawer

This example demonstrates how to manage and toggle between multiple drawers for different actions. Each drawer can be linked to toggle others.

```html
<div>
  <button class="kt-btn" data-kt-drawer-toggle="#drawer_one">
    Show drawer
  </button>
  <div
    class="kt-drawer kt-drawer-start hidden w-56"
    data-kt-drawer="true"
    id="drawer_one"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">
      <button class="kt-btn" data-kt-drawer-toggle="#drawer_two">
        Show another drawer
      </button>
    </div>
  </div>
  <div
    class="kt-drawer kt-drawer-end hidden w-56"
    data-kt-drawer="true"
    id="drawer_two"
  >
    <div class="kt-drawer-header">
      <h3 class="kt-drawer-title">Drawer Title</h3>
      <button
        class="kt-drawer-close"
        aria-label="Close drawer"
        data-kt-drawer-dismiss="#alert"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-x"
          aria-hidden="true"
        >
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg>
      </button>
    </div>
    <div class="kt-drawer-content kt-scrollable">Drawer content</div>
    <div class="kt-drawer-footer">
      <button class="kt-btn" data-kt-drawer-toggle="#drawer_one">
        Show first drawer
      </button>
    </div>
  </div>
</div>
```

--------------------------------

### Initialize and Show Tab with KTTabs

Source: https://ktui.io/docs/tabs

Demonstrates how to get an existing KTTabs instance and programmatically show a specific tab using its button element.

```javascript
const tabsEl = document.querySelector('#my_tabs');
// Select the button element with data-kt-tab-toggle attribute
const tabButton = tabsEl.querySelector('button[data-kt-tab-toggle="#tab_1_2"]');
const tabs = KTTabs.getInstance(tabsEl);

tabs.show(tabButton);
```

--------------------------------

### Interactive read selection demo

Source: https://ktui.io/docs/select

A complete HTML and JavaScript example demonstrating how to read selection values on a button click.

```html
<div class="flex max-w-md flex-col gap-4">
  <select
    id="ktui-select-read-demo"
    class="kt-select"
    data-kt-select="true"
    data-kt-select-placeholder="Pick a stack"
  >
    <option value="react">React</option>
    <option value="vue">Vue</option>
    <option value="svelte">Svelte</option>
  </select>
  <div class="flex flex-wrap items-center gap-2">
    <button
      type="button"
      id="ktui-select-read-demo-btn"
      class="kt-btn kt-btn-outline kt-btn-sm"
    >
      Read selection (console + alert)
    </button>
  </div>
  <p class="text-muted-foreground text-xs">
    Uses
    <code class="text-foreground">window.KTSelect.getInstance</code>,<!-- -->
    <code class="text-foreground">getValue()</code>, and<!-- -->
    <code class="text-foreground">getSelectedOptions()</code> — see the Select
    docs for full patterns.
  </p>
  <script>
    (function () {
      function init() {
        var sel = document.getElementById("ktui-select-read-demo");
        var btn = document.getElementById("ktui-select-read-demo-btn");
        if (!sel || !btn || !window.KTSelect) return;
        if (btn.getAttribute("data-kt-select-read-demo") === "1") return;
        btn.setAttribute("data-kt-select-read-demo", "1");

        btn.addEventListener("click", function () {
          var inst =
            window.KTSelect.getInstance(sel) ||
            window.KTSelect.getOrCreateInstance(sel);
          if (!inst) return;
          var scalar = inst.getValue();
          var all = inst.getSelectedOptions();
          var native = sel.value;
          var msg =
            "getValue(): " +
            JSON.stringify(scalar) +
            "\ngetSelectedOptions(): " +
            JSON.stringify(all) +
            "\nnative select.value: " +
            JSON.stringify(native);
          console.log("[KTSelect read demo]", {
            getValue: scalar,
            getSelectedOptions: all,
            nativeValue: native,
          });
          window.alert(msg);
        });
      }

      function schedule() {
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", init);
        } else if (window.KTSelect) {
          setTimeout(init, 0);
        } else {
          window.addEventListener("load", init);
        }
      }
      schedule();
    })();
  </script>
</div>
```

--------------------------------

### Import and Use KTRepeater in TypeScript

Source: https://ktui.io/docs/repeater

Import the KTRepeater component and its types from `@keenthemes/ktui`. This example demonstrates getting an instance and adding a clone, as well as creating a new instance with configuration.

```typescript
import {
  KTRepeater,
  type KTRepeaterConfigInterface,
  type KTRepeaterInterface,
} from '@keenthemes/ktui';

const triggerEl = document.querySelector<HTMLElement>('#my_repeater_trigger');
if (!triggerEl) return;

const repeater: KTRepeaterInterface | null = KTRepeater.getInstance(triggerEl);
if (repeater) repeater.add();

const options: KTRepeaterConfigInterface = {
  target: '#template',
  wrapper: '#container',
  limit: 5,
};
const instance: KTRepeaterInterface = KTRepeater.getOrCreateInstance(triggerEl, options);
```

--------------------------------

### TypeScript Integration for KTScrollto

Source: https://ktui.io/docs/scrollto

Illustrates how to import KTScrollto component and its types from `@keenthemes/ktui` for type-safe usage. This example shows how to get an instance, trigger a scroll, and create a new instance with typed options.

```typescript
import {
  KTScrollto,
  type KTScrolltoConfigInterface,
  type KTScrolltoInterface,
} from '@keenthemes/ktui';
 
const scrolltoEl = document.querySelector<HTMLElement>('#my_scrollto');
if (!scrolltoEl) return;
 
const scrollto: KTScrolltoInterface | null = KTScrollto.getInstance(scrolltoEl);
if (scrollto) scrollto.scroll();
 
const options: KTScrolltoConfigInterface = {};
const instance: KTScrolltoInterface = new KTScrollto(scrolltoEl, options);
```

--------------------------------

### KTReparent Initialization and Usage

Source: https://ktui.io/docs/reparent

Demonstrates how to import the component, initialize a new instance with configuration, and retrieve an existing instance to call update methods.

```APIDOC
## KTReparent Initialization

### Description
Initializes a new KTReparent instance or retrieves an existing one from a DOM element.

### Usage
```typescript
import { KTReparent, type KTReparentConfigInterface, type KTReparentInterface } from '@keenthemes/ktui';

// Initialize
const reparentEl = document.querySelector<HTMLElement>('#my_reparent');
const instance: KTReparentInterface = new KTReparent(reparentEl, options);

// Retrieve existing instance
const reparent: KTReparentInterface | null = KTReparent.getInstance(reparentEl);
if (reparent) reparent.update();
```
```

--------------------------------

### TypeScript Integration with KTRating

Source: https://ktui.io/docs/rating

Import `KTRating` and its types from `@keenthemes/ktui` for type-safe usage. This example shows how to get an instance, set its value, and retrieve it, as well as how to create a new instance with typed configuration.

```typescript
import {
  KTRating,
  type KTRatingConfigInterface,
  type KTRatingInterface,
} from '@keenthemes/ktui';

const el = document.querySelector<HTMLElement>('[data-kt-rating]');
if (!el) return;

const rating: KTRatingInterface | null = KTRating.getInstance(el);
if (rating) {
  rating.setValue(4);
  console.log(rating.getValue());
}

// Or create with typed config
const options: KTRatingConfigInterface = { value: 3, max: 5 };
const instance: KTRatingInterface = new KTRating(el, options);
```

--------------------------------

### Initialize and Use KTClipboard Instance

Source: https://ktui.io/docs/clipboard

Demonstrates how to import KTClipboard, get or create an instance, and configure it with options. Use this when you need programmatic control over the clipboard functionality.

```typescript
import {
  KTClipboard,
  type KTClipboardConfigInterface,
  type KTClipboardInterface,
} from '@keenthemes/ktui';

const el = document.querySelector<HTMLElement>('[data-kt-clipboard]');
if (!el) throw new Error('Missing clipboard trigger');

// Get existing instance
const instance: KTClipboardInterface | null = KTClipboard.getInstance(el);

// Or create one with typed config
const options: KTClipboardConfigInterface = {
  target: '#my_input',
  text: 'Fallback (if configured via attributes)',
  action: 'copy',
};
const clipboard = KTClipboard.getOrCreateInstance(el, options);
```

--------------------------------

### TypeScript Integration for KTScrollspy

Source: https://ktui.io/docs/scrollspy

Import KTScrollspy and its associated types for typed options and instance management in TypeScript projects. This example shows how to get an instance, attach an event listener, and create a new instance with options.

```typescript
import {
  KTScrollspy,
  type KTScrollspyConfigInterface,
  type KTScrollspyInterface,
} from '@keenthemes/ktui';

const scrollspyEl = document.querySelector<HTMLElement>('#my_scrollspy');
if (!scrollspyEl) return;

const scrollspy: KTScrollspyInterface | null = KTScrollspy.getInstance(scrollspyEl);
if (scrollspy) scrollspy.on('activate', () => {});

const options: KTScrollspyConfigInterface = {};
const instance: KTScrollspyInterface = new KTScrollspy(scrollspyEl, options);
```

--------------------------------

### Implement Context Menu with Shortcut Hints

Source: https://ktui.io/docs/context-menu

A complete example of a context menu structure using data attributes for triggering and displaying menu items with keyboard shortcuts.

```html
<div data-kt-context-menu="true" class="inline-flex">
  <div
    data-kt-context-menu-trigger="true"
    class="kt-card border-dashed w-[400px] h-[180px] flex items-center justify-center text-muted-foreground text-sm select-none"
  >
    Right click for shortcut hints
  </div>
  <div data-kt-context-menu-menu="true" class="kt-context-menu w-60 hidden">
    <ul class="kt-context-menu-sub">
      <li>
        <button type="button" class="kt-context-menu-link">
          Copy<span
            class="ms-auto text-[11px] tracking-widest text-muted-foreground"
            >CMD+C</span
          >
        </button>
      </li>
      <li>
        <button type="button" class="kt-context-menu-link">
          Cut<span
            class="ms-auto text-[11px] tracking-widest text-muted-foreground"
            >CMD+X</span
          >
        </button>
      </li>
      <li>
        <button type="button" class="kt-context-menu-link">
          Paste<span
            class="ms-auto text-[11px] tracking-widest text-muted-foreground"
            >CMD+V</span
          >
        </button>
      </li>
      <li class="kt-context-menu-separator"></li>
      <li>
        <button type="button" class="kt-context-menu-link">
          Rename<span
            class="ms-auto text-[11px] tracking-widest text-muted-foreground"
            >F2</span
          >
        </button>
      </li>
      <li>
        <button type="button" class="kt-context-menu-link text-destructive">
          Delete<span
            class="ms-auto text-[11px] tracking-widest text-muted-foreground"
            >SHIFT+DEL</span
          >
        </button>
      </li>
    </ul>
  </div>
</div>
```

--------------------------------

### Initialize KTTooltip Instances

Source: https://ktui.io/docs/tooltip

Use KTTooltip.init() to initialize all tooltips on page load. Use KTTooltip.createInstances() for dynamically added elements.

```javascript
KTTooltip.init();
```

```javascript
KTTooltip.createInstances();
```

```javascript
const tooltipEl = document.querySelector('#my-tooltip');
const tooltip = KTTooltip.getInstance(tooltipEl);
```

--------------------------------

### Initialize and Manage Instances

Source: https://ktui.io/docs/toggle-password

Shows how to initialize components on page load, handle dynamic elements, and retrieve instances.

```javascript
// Initialize all togglees
KTTogglePassword.init();
 
// Initialzie pending togglees
KTTogglePassword.createInstances();
 
// Get toggle object
const togglePasswordEl = document.querySelector('#my-toggle-password');
const togglePassword = KTTogglePassword.getInstance(togglePasswordEl);
```

--------------------------------

### Copy Command with Tooltip Feedback

Source: https://ktui.io/docs/clipboard

This example demonstrates copying a command-line instruction and provides tooltip feedback to the user. The `data-kt-tooltip` and `data-kt-tooltip-placement` attributes are used for the tooltip, and the script updates the tooltip text on success or error.

```html
<div class="max-w-md w-full">
  <div class="flex items-center gap-2">
    <input
      type="hidden"
      id="ktui-clipboard-tooltip-input"
      value="npm install @keenthemes/ktui"
    /><button
      id="ktui-clipboard-btn-tooltip"
      type="button"
      class="kt-btn kt-btn-primary kt-btn-sm"
      data-kt-clipboard="true"
      data-kt-clipboard-target="#ktui-clipboard-tooltip-input"
      data-kt-clipboard-action="copy"
      data-kt-tooltip="true"
      data-kt-tooltip-placement="top"
    >
      <span>Copy command</span
      ><span
        data-role="tooltip"
        data-kt-tooltip-content="true"
        class="kt-tooltip"
        >Copy</span
      ></button
    ><span class="text-sm text-muted-foreground"
      ><span class="font-mono">npm install @keenthemes/ktui</span></span
    >
    <script>
      (function () {
        var btn = document.getElementById("ktui-clipboard-btn-tooltip");
        if (!btn) return;
        var tooltip = btn.querySelector('[data-role="tooltip"]');
        var setText = function (text) {
          if (!tooltip) return;
          tooltip.textContent = text;
          clearTimeout(setText._t);
          setText._t = setTimeout(function () {
            tooltip.textContent = "Copy";
          }, 1200);
        };

        btn.addEventListener("kt.clipboard.success", function () {
          setText("Copied");
        });
        btn.addEventListener("kt.clipboard.error", function () {
          setText("Error");
        });
      })();
    </script>
  </div>
</div>
```

--------------------------------

### Alert Component Examples

Source: https://ktui.io/docs/alert

Examples of different alert variants including default, destructive, and warning styles.

```html
<div class="kt-alert kt-alert-outline kt-alert-destructive" id="alert_2">
    <div class="kt-alert-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-triangle-alert"
        aria-hidden="true"
      >
        <path
          d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
        ></path>
        <path d="M12 9v4"></path>
        <path d="M12 17h.01"></path>
      </svg>
    </div>
    <div class="kt-alert-content">
      <h3 class="kt-alert-title">Example Alert Title</h3>
      <p class="kt-alert-description">
        Insert the alert description here. It would look better as two lines of
        text.
      </p>
      <div class="kt-alert-toolbar">
        <div class="kt-alert-actions">
          <button class="kt-link kt-link-xs kt-link-underlined text-mono">
            Upgrade</button
          ><button class="kt-link kt-link-xs text-mono">Dismiss</button>
        </div>
      </div>
    </div>
    <button class="kt-alert-close" data-kt-dismiss="#alert_2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-x"
        aria-hidden="true"
      >
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </div>
  <div class="kt-alert kt-alert-outline kt-alert-warning" id="alert_3">
    <div class="kt-alert-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-triangle-alert"
        aria-hidden="true"
      >
        <path
          d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
        ></path>
        <path d="M12 9v4"></path>
        <path d="M12 17h.01"></path>
      </svg>
    </div>
    <div class="kt-alert-content">
      <h3 class="kt-alert-title">Example Alert Title</h3>
      <p class="kt-alert-description">
        Insert the alert description here. It would look better as two lines of
        text.
      </p>
      <div class="kt-alert-toolbar">
        <div class="kt-alert-actions">
          <button class="kt-link kt-link-xs kt-link-underlined text-mono">
            Upgrade</button
          ><button class="kt-link kt-link-xs text-mono">Dismiss</button>
        </div>
      </div>
    </div>
    <button class="kt-alert-close" data-kt-dismiss="#alert_3">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-x"
        aria-hidden="true"
      >
        <path d="M18 6 6 18"></path>
        <path d="m6 6 12 12"></path>
      </svg>
    </button>
  </div>
```

--------------------------------

### Import Entry Points

Source: https://ktui.io/docs/typescript

Demonstrates various import strategies including component-specific, core, and full-library initialization.

```typescript
import { KTRating } from '@keenthemes/ktui/components/rating';
import { KTRating as KTRatingCore } from '@keenthemes/ktui/core';
import { initAllComponents } from '@keenthemes/ktui/init-all';
```

--------------------------------

### Initialize and Manage KTReparent Instances

Source: https://ktui.io/docs/reparent

Demonstrates static initialization methods and retrieving instances for dynamic DOM elements.

```javascript
// Initialize all scrollables
KTReparent.init();
 
// Initialzie pending scrollables
KTReparent.createInstances();
 
// Get scrollable object
const reparentEl = document.querySelector('#my_reparent');
const reparent = KTReparent.getInstance(reparentEl);
```

--------------------------------

### Get KTSticky Instance and Update

Source: https://ktui.io/docs/sticky

Retrieves an existing KTSticky instance for a given element and updates it. Ensure the element exists before attempting to get the instance.

```javascript
const stickyEl = document.querySelector('#my_sticky');
const sticky = KTSticky.getInstance(stickyEl);

sticky.update();
const isActive = sticky.isActive();
```

--------------------------------

### Get Scrollable Instance and Update Height

Source: https://ktui.io/docs/scrollable

Retrieves an existing KTScrollable instance from a DOM element and updates its calculated height. Ensure the element exists before attempting to get its instance.

```javascript
const scrollableEl = document.querySelector('#my_scrollable');
const scrollable = KTScrollable.getInstance(scrollableEl);

const height = scrollable.getHeight();
scrollable.update();
```

--------------------------------

### Initialize KTUI via UMD Bundle

Source: https://ktui.io/docs/javascript

Use the UMD bundle for global access and automatic full initialization of all components.

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello world!</h1>
    <script src="./node_modules/@keenthemes/ktui/dist/ktui.min.js"></script>
  </body>
</html>
```

--------------------------------

### Initialize and Manage KTImageInput Instances

Source: https://ktui.io/docs/image-input

Shows how to trigger global initialization, handle dynamic DOM elements, and retrieve component instances.

```javascript
// Initialize all image inputs
KTImageInput.init();
 
// Initialzie pending image inputs
KTImageInput.createInstances();
 
// Get image input object
const imageInputEl = document.querySelector('#my_image_input');
const imageInput = KTImageInput.getInstance(imageInputEl);
```

--------------------------------

### Event Listener Example

Source: https://ktui.io/docs/toast

Attaching an event listener to a toast element.

```APIDOC
## Event Listener Example

```javascript
const toast = KTToast.show({ message: 'Event example' });
toa.element.addEventListener('kt.toast.shown', (e) => {
  console.log('Toast shown', e.detail);
});
```
```

--------------------------------

### Scroll To Target Example

Source: https://ktui.io/docs/scrollto

Smoothly scroll to top or bottom of the page.

```APIDOC
## Scroll To Target

Smoothly scroll to top of the page.

```html
<div class="space-y-5">
  <div class="text-center">
    <button id="top" class="kt-btn" data-kt-scrollto="#bottom">
      Scroll to bottom<svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-down size-4"
        aria-hidden="true"
      >
        <path d="M12 5v14"></path>
        <path d="m19 12-7 7-7-7"></path>
      </svg>
    </button>
  </div>
  <div class="h-[1000px]"></div>
  <div class="text-center">
    <button
      id="bottom"
      class="kt-btn"
      data-kt-scrollto="#top"
      data-kt-scrollto-offset="-50px"
    >
      Scroll to top<svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up size-4"
        aria-hidden="true"
      >
        <path d="m5 12 7-7 7 7"></path>
        <path d="M12 19V5"></path>
      </svg>
    </button>
  </div>
</div>
```
```

--------------------------------

### Initialize and Manage KTDropdown Instances

Source: https://ktui.io/docs/dropdown

Shows how to initialize all KTDropdown components on the page using init() or createInstances() for dynamically added elements. Also demonstrates retrieving an existing instance with getInstance().

```javascript
// Initialize all dropdowns
KTDropdown.init()

// Initialzie pending dropdowns
KTDropdown.createInstances();

// Get dropdown object
const dropdownEl = document.querySelector('#my-dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);
```

--------------------------------

### Alert Actions Configuration

Source: https://ktui.io/docs/alert

Example of an alert structure with action icons and custom content.

```html
<div class="space-y-5">
  <div class="kt-alert kt-alert-outline" id="alert_1">
    <div class="kt-alert-icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-triangle-alert"
        aria-hidden="true"
      >
        <path
```

--------------------------------

### KTTabs Initialization and Usage

Source: https://ktui.io/docs/tabs

Demonstrates how to initialize and use the KTTabs component, including programmatic control and event handling.

```APIDOC
## KTTabs Component API

### Description

The KTTabs component allows for the creation and management of tabbed interfaces. It supports auto-initialization and programmatic control via JavaScript.

### Methods

#### Instance Methods

- **`new KTTabs(element, options)`**: Creates a new KTTabs instance.
  - `element` (HTMLElement): The DOM element to initialize the tabs on.
  - `options` (object): Configuration options for the tabs.

- **`show(tabElement)`**: Activates a tab button and displays its associated content.
  - `tabElement` (HTMLElement): The tab button element to activate.

- **`isShown(tabElement)`**: Checks if the content associated with a tab button is visible.
  - `tabElement` (HTMLElement): The tab button element to check.

- **`getOption(name)`**: Retrieves the value of a configuration option.
  - `name` (string): The name of the option to retrieve.

- **`getElement()`**: Retrieves the DOM element associated with the instance.

- **`on(eventName, handler)`**: Attaches an event listener.
  - `eventName` (string): The name of the event to listen for.
  - `handler` (function): The callback function to execute.
  - Returns: `string` - The unique ID of the registered listener.

- **`off(eventName, eventId)`**: Removes an event listener.
  - `eventName` (string): The name of the event.
  - `eventId` (string): The ID of the listener to remove.

- **`dispose()`**: Removes the KTTabs instance and cleans up associated data.

#### Static Utility Methods

- **`KTTabs.init()`**: Initializes all KTTabs instances on the page.

- **`KTTabs.createInstances()`**: Creates instances for dynamically added elements.

- **`KTTabs.getInstance(element)`**: Gets the KTTabs instance associated with a DOM element.
  - `element` (HTMLElement): The DOM element.
  - Returns: `KTTabs` - The KTTabs instance or null.

- **`KTTabs.getOrCreateInstance(element)`**: Gets or creates a KTTabs instance for a DOM element.
  - `element` (HTMLElement): The DOM element.
  - Returns: `KTTabs` - The KTTabs instance.

### Events

- **`show`**: Triggered before a tab is shown. Can be cancelled by setting `detail.cancel = true`.
- **`shown`**: Triggered after a tab is fully displayed.

### Options

- **`data-kt-tabs`** (`boolean`, default: `true`): Enables auto-initialization.
- **`data-kt-tabs-hidden-class`** (`string`, default: `
```

--------------------------------

### Basic Usage Example

Source: https://ktui.io/docs/scrollto

Smoothly scroll to a specific element within a scrollable container.

```APIDOC
## Basic Usage

Smoothly scroll to a specific element within a scrollable container.

```html
<div
  class="kt-scrollable overflow-y-auto w-full border border-border p-6 rounded-lg text-center h-[300px]"
  id="scrollable"
>
  <div class="h-10"></div>
  <button
    class="kt-btn"
    id="scrollto_one"
    data-kt-scrollto="#scrollto_two"
    data-kt-scrollto-parent="#scrollable"
  >
    Scroll to element<svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-down size-4"
      aria-hidden="true"
    >
      <path d="M12 5v14"></path>
      <path d="m19 12-7 7-7-7"></path>
    </svg>
  </button>
  <div class="h-[5000px]"></div>
  <button
    class="kt-btn"
    id="scrollto_two"
    data-kt-scrollto="#scrollto_one"
    data-kt-scrollto-parent="#scrollable"
    data-kt-scrollto-offset="-100px"
  >
    Scroll back<svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-up size-4"
      aria-hidden="true"
    >
      <path d="m5 12 7-7 7 7"></path>
      <path d="M12 19V5"></path>
    </svg>
  </button>
</div>
```
```

--------------------------------

### KTDataTable Event Listeners

Source: https://ktui.io/docs/datatable

Examples of subscribing to common datatable events such as sorting, state updates, and row selection.

```javascript
datatable.on('sort', (payload) => {
  console.log(payload.field, payload.order);
});
 
datatable.on('update', () => {
  const state = datatable.getState();
  console.log(state.page, state.pageSize, state.totalItems);
});
 
datatable.on('checked', (payload) => {
  console.log(payload.value);
});
```

--------------------------------

### Get KTTabs Instance with KTTabs.getInstance()

Source: https://ktui.io/docs/tabs

Demonstrates how to retrieve an existing KTTabs instance associated with a specific DOM element.

```javascript
// Get tabs object
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);
```

--------------------------------

### Manage KTModal Instances

Source: https://ktui.io/docs/modal

Shows how to initialize modals and retrieve instances using static class methods.

```javascript
// Initialize all modals
KTModal.init()
 
// Initialzie pending modals
KTModal.createInstances();
 
// Get modal object
const modalEl = document.querySelector('#my-modal');
const modal = KTModal.getInstance(modalEl);
```

--------------------------------

### Initialize KTContextMenu Instance

Source: https://ktui.io/docs/context-menu

Demonstrates how to import the necessary types and initialize a context menu instance on a DOM element.

```typescript
import {
  KTContextMenu,
  type KTContextMenuConfigInterface,
  type KTContextMenuInterface,
} from '@keenthemes/ktui';
 
const root = document.querySelector<HTMLElement>('[data-kt-context-menu]');
if (!root) throw new Error('Missing context menu root');
 
const options: KTContextMenuConfigInterface = {
  placement: 'right-start',
  placementRtl: 'left-start',
};
 
const contextMenu: KTContextMenuInterface =
  KTContextMenu.getOrCreateInstance(root, options);
```
Tokens:
Raw