TypeScript

Overview

KTUI is written in TypeScript and ships type definitions from the main package entry. You can import both component classes and their config/instance types from @keenthemes/ktui for type-safe usage in TypeScript projects.

Where types live

Type definitions are included in the published package and are exposed from the package main entry. You do not need to reference deep paths such as lib/esm—import everything from @keenthemes/ktui.

Recommended import pattern

Import the component class and, when you need typed options or a typed instance, the corresponding interfaces from the same package:

import {
  KTRating,
  type KTRatingConfigInterface,
  type KTRatingInterface,
} from '@keenthemes/ktui';
 
const el = document.querySelector<HTMLElement>('[data-kt-rating]');
if (!el) return;
 
// Typed options when creating manually
const options: KTRatingConfigInterface = {
  value: 3,
  max: 5,
  readonly: false,
};
 
const rating: KTRatingInterface = new KTRating(el, options);
rating.setValue

Example: Tooltip with types

import {
  KTTooltip,
  type KTTooltipConfigInterface,
  type KTTooltipInterface,
} from '@keenthemes/ktui';
 
const tooltipEl = document.querySelector<HTMLElement>('#my_tooltip');
if (!tooltipEl) return;
 
const options: KTTooltipConfigInterface = {
  placement: 'bottom-start',
};
 
const tooltip: KTTooltipInterface = new KTTooltip(tooltipEl, options);
tooltip.show();
tooltip.hide();
tooltip.toggle();

ESM and bundlers

Use the package as an ESM module so that tree-shaking and types resolve correctly. The package exposes module (ESM) and main (CJS); TypeScript will use the types from the types field (lib/esm/index.d.ts). No globals are required—you can call KTComponents.init() if you still load the bundle globally, or initialize components programmatically with new KTRating(el, options) and similar APIs.

See also

• JavaScript — Script bundle and data-attribute initialization
• Rating, DataTable, Tooltip — Component docs include TypeScript examples