メニュー
Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project. Use this skill when setting up KtUI for the first time, adding it to a new project, configuring Tailwind for KtUI, or troubleshooting initialization issues.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | ktui-install |
| description | Install, configure, and initialize KtUI (Keenthemes Tailwind UI) in any project. Use this skill when setting up KtUI for the first time, adding it to a new project, configuring Tailwind for KtUI, or troubleshooting initialization issues. |
npm install @keenthemes/ktui
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...
],
};
Import KtUI's built-in CSS (or use your own build of the source):
import '@keenthemes/ktui/dist/styles.css';
import { KTComponents } from '@keenthemes/ktui';
// Call once after DOM is ready
KTComponents.init();
| 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 |
Never call init() during server-side rendering. Guard with:
if (typeof window !== 'undefined') {
KTComponents.init();
}
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();
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';
KtUI requires CSS custom variables defined on :root. At minimum:
: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);
--border: oklch(92% 0.004 264.531);
--radius: 0.5rem;
}
See the ktui skill or ktui.io/docs/theming for the full variable list.
Add the Tailwind dark variant:
@custom-variant dark (&:is(.dark *));
Override the same CSS variables under .dark:
.dark {
--background: oklch(14.1% 0.005 285.823);
--foreground: oklch(98.5% 0 0);
--primary: oklch(70.7% 0.165 254.624);
--primary-foreground: oklch(14.1% 0.005 285.823);
}
Toggle .dark on <html> or use the KTThemeSwitch component.
| Problem | Cause | Fix |
|---|---|---|
| Components not interactive | init() not called | Call KTComponents.init() after DOM ready |
| Tailwind classes not applied | Missing content path | Add ktui/src/** to Tailwind config |
| Styles look broken | CSS variables not defined | Define required variables on :root |
| SSR hydration mismatch | init() on server | Guard with typeof window !== 'undefined' |
| Re-init after navigation | SPA didn't re-init | Call KTComponents.init() after route change |
KtUI DataTable (KTDataTable) — local/remote data, sorting, filtering, pagination, checkbox selection, state persistence, fixed layouts, event system, and architecture. Use this skill when building, debugging, or customizing DataTable components.
KtUI Select (KTSelect) — rich searchable multi-select dropdown replacing native select. Tags, combobox, remote data, pagination, select-all, events, and programmatic API. Use this skill when building, debugging, or customizing Select components.
Comprehensive guide to KtUI (Keenthemes Tailwind UI) — components, theming, initialization, data-attribute API, event system, helpers, and common patterns. Use this skill when building UI with KtUI, adding/customizing components, working with KtUI theming/colors/dark-mode, or when the user mentions KtUI, ktui, Keenthemes components, or Tailwind UI components from Keenthemes.