ktui-install

KtUI Installation & Setup

1. Install the package

npm install @keenthemes/ktui

2. Tailwind CSS config

Add KtUI source paths to your Tailwind content array so Tailwind scans KtUI classes:

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

3. Import styles

Import KtUI's built-in CSS (or use your own build of the source):

import '@keenthemes/ktui/dist/styles.css';

4. Import and initialize components

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

// Call once after DOM is ready
KTComponents.init();

Per-framework placement

Framework	Where to call KTComponents.init()
Vanilla JS	DOMContentLoaded listener or <script> at bottom of <body>
React	useEffect(() => { KTComponents.init(); }, [])
Vue 3	onMounted(() => { KTComponents.init(); })
Next.js	Inside a client component's useEffect (never during SSR)
Nuxt	Inside onMounted or a client-only plugin
Laravel Livewire	Automatic — livewire:navigate triggers re-init

SSR safety

Never call init() during server-side rendering. Guard with:

if (typeof window !== 'undefined') {
  KTComponents.init();
}

Dynamic content (SPAs, lazy-loaded views)

After injecting new KtUI markup (route change, AJAX-loaded modal, etc.), re-initialize:

// Re-init everything (safe — existing instances are skipped)
KTComponents.init();

// Or per-component
import { KTModal } from '@keenthemes/ktui';
KTModal.init();

5. TypeScript types

All config and interface types are exported from the package root — no deep paths:

import type {
  KTModalConfigInterface,
  KTDataTableConfigInterface,
  KTDropdownConfigInterface,
  KTSelectConfigInterface,
  KTToastConfigInterface,
  // ... etc
} from '@keenthemes/ktui';

6. CSS variables (theming)

KtUI requires CSS custom variables defined on :root. At minimum: