JavaScript

Docs

JavaScript

Use KTUI JavaScript with clear import and initialization modes for modern apps.

Quick Start (Bundle)

Use the UMD bundle when you want global usage with automatic full initialization.

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

Initialization Modes (Recommended)

@keenthemes/ktui/components/<name>: import one component and initialize only that component.
@keenthemes/ktui/core: side-effect-free entry for importing multiple components without auto-init.
@keenthemes/ktui/init-all: explicit full-library initialization (legacy-style behavior on purpose).
@keenthemes/ktui (root): legacy-compatible entry that auto-initializes all components.

Selective Import (Best Practice)

For production apps, prefer selective imports and explicit per-component initialization.

import { KTTogglePassword } from '@keenthemes/ktui/components/toggle-password';
 
KTTogglePassword.init();

Data Attribute Usage

Data attributes still work and are a convenient way to bind behavior to markup.

<button data-kt-tooltip="true" id="my_tooltip">
	Toggle Tooltop
	<div class="kt-tooltip" data-kt-tooltip-content="true">
		Hey, a delightful tooltip is here!
	</div>
</button>

Manual Component Initialization

If you prefer manual control, avoid the data attribute auto-init pattern and instantiate directly.

const tooltipEl = document.querySelector('#my_tooltip');
const options = {
	placement:'bottom-start'
};
const tooltip = new KTTooltip(tooltipEl, options);
tooltip.show();
tooltip.hide();
tooltip.toggle();

Global Re-Initialization

Use KTComponents.init() when you intentionally want broad initialization (for example, after large DOM updates).

KTComponents.init();

SPA / SSR guidance

Re-run only affected component init() methods after route/content changes.
For dynamically injected markup, initialize only the components present in the new fragment.
In SSR apps, run initialization on the client only (after mount), never on the server.

Migration Notes

Move from @keenthemes/ktui root imports to @keenthemes/ktui/components/<name> (or @keenthemes/ktui/core) for better control.
Avoid double initialization: do not combine @keenthemes/ktui/init-all with frequent broad KTComponents.init() calls; prefer targeted re-init.

TypeScript

See TypeScript for typed examples and import patterns.

PreviouseTheming NextTypeScript

On This Page

Quick Start (Bundle)
Initialization Modes (Recommended)
Selective Import (Best Practice)
Data Attribute Usage
Manual Component Initialization
Global Re-Initialization
- SPA / SSR guidance
- Migration Notes
TypeScript