Setup

Install package

To install KLOKTUN UI Kit, you can use npm or yarn. Open your terminal and navigate to your project directory, then run one of the following commands:

npm install @kloktun/uikit

Wrap root component

Wrap root component to <KloktunUI> and import styles

import React from 'react'
 
import '@kloktun/uikit/lib/index.css'; // import styles
import { KloktunUI } from '@kloktun/uikit';
 
const App = () => {
    return (
        <KloktunUI>
            <main>Application</main>
        </KloktunUI>
    );
}
 
export default App

Setup tailwind.config.js

/** @type {import('tailwindcss').Config} */
 
const {
  TailwindPreset
} = require('@kloktun/uikit');
 
module.exports = {
 
  presets: [
    TailwindPreset
  ],
 
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ]
  
}

Create custom theme (optional)

You can create custom theme with additional settings

import React from 'react'
 
import '@kloktun/uikit/lib/index.css'; // import styles
import { KloktunUI, Theme } from '@kloktun/uikit';
 
const customTheme = new Theme({
    primary: "#9160f8"
});
 
const App = () => {
    return (
        <KloktunUI theme={customTheme}>
            <main>Application</main>
        </KloktunUI>
    );
}
 
export default App

Getting Started Alert