ktui-components

name	ktui-components
description	Guides correct use of KtUI (Keenthemes Tailwind UI) components—imports from @keenthemes/ktui, init pattern, and docs. Use this skill when building UI with KtUI, adding or customizing KtUI components, or when the user mentions KtUI, ktui, Keenthemes components, or Tailwind UI components from Keenthemes.

KtUI Components

Use this skill when working with KtUI—free Tailwind UI components by Keenthemes. It ensures correct package usage, initialization, and reference to official docs.

Package and imports

• Package: @keenthemes/ktui (npm install @keenthemes/ktui).
• Import pattern (ESM): Import components and/or the init helper from the package root:
  • Single component: import { KTModal } from '@keenthemes/ktui';
  • Init all: import { KTComponents } from '@keenthemes/ktui'; then call KTComponents.init() after DOM ready.
• Types (TypeScript): Types are exported from the same entry; use the package root (e.g. @keenthemes/ktui) for types, not deep lib/esm paths.
• Styles: Include KtUI CSS (e.g. from the package or built dist/styles.css) and ensure Tailwind and CSS variables are set up as in the installation docs.

Initialization

• Call KTComponents.init() once after the DOM is ready so that data-attribute–driven components (dropdowns, modals, tabs, etc.) are initialized.
• Frameworks (React, Vue, Next): Run init after the root is mounted (e.g. useEffect with empty deps, or onMounted) so the DOM with data-kt-* attributes exists before init.
• For dynamically added markup (e.g. after route change or lazy load), run KTComponents.init() again or use per-component init (e.g. KTModal.init() on the new container).
• SSR: Call init only on the client (e.g. inside useEffect or when typeof document !== 'undefined'), never during server render.
• Per-component init is also available (e.g. KTModal.init()) when not using the full init.

Documentation

• Official docs: https://ktui.io — use for component APIs, examples, and markup.
• Doc paths: Getting started: ktui.io/docs/installation, ktui.io/docs/theming, ktui.io/docs/typescript, ktui.io/docs/dark-mode, ktui.io/docs/rtl, ktui.io/docs/changelog. Components: ktui.io/docs/<component> (e.g. ktui.io/docs/modal, ktui.io/docs/tooltip, ktui.io/docs/datatable, ktui.io/docs/dropdown, ktui.io/docs/repeater).
• Prefer docs and examples from ktui.io over inferring markup or options.

Common pitfalls

• Components not opening or reacting: Ensure KTComponents.init() ran after the relevant DOM was in the page; for SPAs, run init after navigation or after injecting KtUI markup.
• Styles missing or wrong: Confirm KtUI CSS and CSS variables are loaded (see installation, theming).
• SSR/hydration: Do not call init during server render; run it only in the browser after mount.

Component list (reference)

Components exported from @keenthemes/ktui include: KTDropdown, KTModal, KTDrawer, KTCollapse, KTDismiss, KTTabs, KTAccordion, KTScrollspy, KTScrollable, KTScrollto, KTSticky, KTReparent, KTToggle, KTTooltip, KTStepper, KTThemeSwitch, KTImageInput, KTTogglePassword, KTDataTable, KTSelect, KTToast, KTRating, KTRepeater. See the package exports or ktui.io for the full list and usage.