Approach

KTUI is a modular component library built on Tailwind CSS and JavaScript, designed for predictable behavior and scalable frontend architecture.

CSS Approach

KTUI provides semantic component classes (for example kt-btn, kt-card, kt-modal) to standardize UI patterns while still allowing Tailwind utility overrides where needed.

• Consistency: Shared class patterns keep UI behavior and styling aligned.
• Maintainability: Component-level styles reduce duplication.
• Flexibility: Tailwind utilities can still be composed for custom variants.

Theming Approach

KTUI uses CSS variables for global theming (light/dark and brand customization). Prefer semantic color tokens such as bg-primary and text-primary-foreground instead of hard-coded palette values.
See Theming and Dark Mode for setup details.

JavaScript Approach

KTUI supports both declarative (data-kt-*) and programmatic initialization.
For modern applications, use explicit import/init modes to avoid unnecessary global initialization.

Initialization Modes

• @keenthemes/ktui/components/<name>: recommended for single-component usage.
• @keenthemes/ktui/core: side-effect-free multi-component imports.
• @keenthemes/ktui/init-all: explicit full-library initialization.
• @keenthemes/ktui (root): legacy-compatible auto-init behavior.

Example (Selective Import)

import { KTTogglePassword } from '@keenthemes/ktui/components/toggle-password';
 
KTTogglePassword.init();

See JavaScript and TypeScript for full examples.

Global Advantages

• Unified workflow: Styling, theming, and JS behavior follow one system.
• Operational clarity: Explicit init modes reduce integration surprises.
• Performance control: Selective imports minimize unnecessary runtime work.
• Scalability: Modular architecture fits SPA, MPA, and SSR scenarios.

Getting Started

Start with Installation, then follow JavaScript, TypeScript, and Theming based on your stack.