Approach

KtUI delivers a modular, lightweight component library powered by Tailwind CSS and JavaScript, optimized for scalable, maintainable, and high-performance front-end development

CSS Approach

KtUI uses custom classes like kt-btn, kt-card, and kt-modal to encapsulate reusable UI patterns, ensuring consistency and reducing Tailwind class clutter.

• Core Classes:
  • kt-btn: Pre-styled buttons with variants (e.g., primary, secondary).
  • kt-card: Containers with shadow, padding, and borders.
  • kt-modal: Centered dialogs with backdrops.
• Customization: Extend with Tailwind utilities (e.g., bg-blue-500, rounded-lg).
• Benefits:
  • Consistency: Unified design across components.
  • Maintainability: Centralized styles simplify updates.
  • Flexibility: Utility classes allow rapid customization.

Theming Approach

KtUI supports global theming with CSS variables, inspired by Shadcn, enabling seamless light and dark mode styling. Use semantic classes like bg-primary and text-primary-foreground to apply themes defined by variables (e.g., --primary, --primary-foreground). Customize themes via CSS variables for consistent, scalable styling. See the Theming Documentation for details.

JavaScript Approach

KtUI’s JavaScript components are initialized lazily via data-kt attributes, enabling declarative, performant interactivity without manual scripting.

• Example: Tooltip:

  <button
    class="kt-btn kt-btn-outline"
    data-kt-tooltip="true"
    data-kt-tooltip-placement="bottom-start"
  >
    Click Me
    <span class="kt-tooltip" data-kt-tooltip-content="true"
      >Some tooltip info</span
    >
  </button>

• Mechanism:
  • Lazy Initialization: Components activate only when data-kt attributes are detected.
  • Attribute-Driven: Attributes like data-kt-tooltip-placement define behavior.
  • Performance: Minimal DOM scanning ensures fast load times.
• Benefits:
  • Declarative: Behavior is configured via HTML attributes.
  • Scalable: New components integrate with additional attributes.

Global Advantages

• Unified Workflow: CSS, JavaScript, and theming align for streamlined development.
• Developer Efficiency: Predefined classes and attributes minimize boilerplate.
• Performance: Lazy initialization and minimal CSS/JS optimize speed.
• Scalability: Modular design supports growing projects.

Getting Started

Explore the Theming Documentation to customize components with CSS variables, or dive into the Components section for usage examples.