一键在 Manus 中运行任何 Skill

ktui-install

星标147

分支21

更新时间2026年6月2日 01:45

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 页面并帮你完成安装。

在 Manus 中运行

来源

keenthemes

keenthemes/ktui

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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:

: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.

7. Dark mode setup

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.

8. Troubleshooting

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

Documentation

Installation: ktui.io/docs/installation
Theming: ktui.io/docs/theming
Dark mode: ktui.io/docs/dark-mode
TypeScript: ktui.io/docs/typescript

同仓库更多 Skills

同仓库

ktui-datatable

keenthemes/ktui

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.

2026-06-02147

ktui-select

keenthemes/ktui

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.

2026-06-02147

ktui

keenthemes/ktui

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.

2026-06-02147

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.

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:

: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.

7. Dark mode setup

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.

8. Troubleshooting

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

Documentation

Installation: ktui.io/docs/installation
Theming: ktui.io/docs/theming
Dark mode: ktui.io/docs/dark-mode
TypeScript: ktui.io/docs/typescript