Instalation

Docs

Instalation

This guide will help you get started with KtUI in just a minute.

Before you begin, ensure you have installed Node.js and Tailwind CSS, and have a working Tailwind based project.

Install via NPM

Install KtUI

Run the following command in your terminal to install KtUI package:

npm i @keenthemes/ktui

Variables

Include KtUI variables in your Tailwind entry file style.css:

/** Colors **/
:root {
  /** Base Colors **/
  --background: oklch(1 0 0); /* --color-white */
  --foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --card: oklch(1 0 0); /* --color-white */
  --card-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --popover: oklch(1 0 0); /* --color-white */
  --popover-foreground: oklch(14.1% 0.005 285.823); /* --color-zinc-950 */
  --primary

Dark Mode

To enable automated dark mode support add below Tailwind variant in your Tailwind entry file style.css:

@custom-variant dark (&:is(.dark *));

Styles

Include KtUI styles in your Tailwind entry file style.css:

@import './node_modules/ktui/styles.css';

Font

Specify a font family of your choice in your Tailwind entry file style.css:

@theme {
  --default-font-family: Inter;
}

Include the font file:

<html>
  <head>
    ...
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    ...
  </head>
  <body className="antialiased">
    ....
  </body>
</html>

For a modern and visually appealing design, we recommend using Inter as the default font in your KtUI project. For smoother global font apperance add antialiased class to your page's body tag.

Assets

Include KtUI JavaScript, Tailwind CSS, and fonts:

<html>
  <head>
    ...
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link href="my_project_root/css/styles.css" rel="stylesheet" />
    ...
  </head>
  <body className="antialiased">
    ....
  </body>
  <script src="./node_modules/@keenthemes/ktui/dist/ktui.min.js"></script>
</html>

That's it!

Explore the KtUI Components and add the ones you need into your project.

PreviouseIntroduction NextApproach

On This Page

Install via NPM