KtUI (Keenthemes Tailwind UI)

KTSelect supports two event channels: Internal callbacks via .on() and DOM CustomEvents dispatched on both the element and the document (if dispatchGlobalEvents is enabled).

Event Names

show, close, change, enabled, disabled, updated, updateError, reloadStart, reloadComplete, reloadError, refreshed, refreshError.

Event Detail Shape

When listening to a CustomEvent, the event.detail object contains:

• instance: The KTSelect instance.
• element: The root HTMLElement.
• payload: Event-specific data.

Usage Examples

Listening on the document (Global):

document.addEventListener('kt-select:change', (e) => {
  console.log(e.detail.instance.getSelectedOptions());
});

Listening on a specific element:

el.addEventListener('change', (e) => {
  console.log(e.detail.instance.getSelectedOptions());
});

KTUI components resolve configuration using a specific hierarchy. When multiple configuration sources are provided, the one with the higher priority wins.

Priority Order (Lowest to Highest):

1. window.KTGlobalComponentsConfig[component] (Global window object)
2. Component class _defaultConfig (Internal defaults)
3. Static .config() (Per-component static configuration)
4. data-kt-{component}-* (HTML data attributes)
5. --kt-{component}-{option} (CSS custom properties)
6. Constructor config argument (Direct instantiation)

KTUI supports RTL layouts using logical CSS properties.

Global Setup

Add the dir="rtl" attribute to your <html> element:

<html dir="rtl">
</html>

Usage

1. Logical Properties: Use classes like text-start and ps-5 (padding-start) instead of text-left or pl-5. These automatically adjust based on the text direction.
2. RTL Modifier: For specific overrides, use the rtl:* Tailwind modifier:

<div class="text-left pl-5 rtl:text-right rtl:pr-5">
    Example text
</div>

<!-- Setup rtl mode -->
<html dir="rtl">
    <!-- HTML markup -->
</html>

<!-- Using logical properties -->
<div class="text-start ps-5">
    Example text
</div>

<!-- Using rtl modifier -->
<div class="text-left pl-5 rtl:text-right rtl:pr-5">
    Example text
</div>

KTUI uses a Shadcn-inspired CSS variable convention. You can define your theme in your Tailwind entry file using :root.

Naming Convention:

• Background colors: Omit the -background suffix. Example: bg-primary uses var(--primary).
• Foreground colors: Use the -foreground suffix. Example: text-primary-foreground uses var(--primary-foreground).

Semantic Classes:

• bg-background, text-foreground
• bg-primary, text-primary-foreground
• bg-card, text-card
• kt-btn, kt-card, kt-input

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(14.1% 0.005 285.823);
  --primary: oklch(62.3% 0.214 259.815);
  --primary-foreground: oklch(1 0 0);
  --radius: 0.5rem;
  /* ... other variables */
}

KTUI has built-in support for Right-to-Left (RTL) layouts:

• KTDom.isRTL() can be used to check if the document has dir="rtl" on the <html> element.
• Dropdowns automatically adjust their placement based on the placementRtl configuration.
• It is recommended to use CSS logical properties (e.g., inset-inline-start instead of left) for custom styling to ensure compatibility.

To ensure Tailwind CSS scans and generates the necessary utility classes used by KtUI, add the KtUI source paths to your tailwind.config.js content array.

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/@keenthemes/ktui/src/**/*.{ts,js}',
    // your app files...
  ],
};

To load options from an external API, set data-kt-select-remote="true" and provide the endpoint via data-kt-select-remote-url="...". For APIs that support paginated results, add data-kt-select-pagination="true" to enable a "Load More" button.

<select data-kt-select="true"
        data-kt-select-remote="true"
        data-kt-select-remote-url="https://api.example.com/options"
        data-kt-select-pagination="true">
</select>

To use KTUI components, you must import its styles and include its JavaScript bundle in your project.

1. Import Styles

In your Tailwind entry file (style.css), import the KTUI styles:

@import "./node_modules/@keenthemes/ktui/dist/styles.css";

2. Include JavaScript

Include the minified KTUI script in your HTML (usually before the closing </body> tag):

<script src="./node_modules/@keenthemes/ktui/dist/ktui.min.js"></script>

3. Fonts (Optional)

If you want to use a specific font like 'Inter', define it in your @theme block in style.css and include the font via a <link> tag in your HTML <head>.

To use the KTDataTable component, mark a container element with the data-kt-datatable="true" attribute. Inside, include a standard HTML <table> with <thead> and <tbody>. Use data-kt-datatable-column="[name]" on <th> elements to map columns to your data keys.

To interact with the table in TypeScript, use KTDataTable.getInstance(tableEl) to retrieve the instance associated with the element.

<div data-kt-datatable="true">
  <table>
    <thead>
      <tr>
        <th data-kt-datatable-column="name">Name</th>
        <th data-kt-datatable-column="email">Email</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

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

const dt = KTDataTable.getInstance(tableEl);