Installation

Install IK UI and bring a full suite of Vue components into your project in minutes.

Installing library

Run one of the following commands to add IK UI to your project:

npm install @ikol/ui-kit

Importing into your Vue project

app.ts

import { createApp } from 'vue'
import App from './App.vue'

import { createIkolUI } from '@ikol/ui-kit';

const app = createApp(App);
const ui = createIkolUI();

app.use(ui);
app.mount('#app');

Please note that vue and other dependencies are peer dependencies, meaning you should ensure they are installed first to use specific features of the framework, eg. install dayjs before using date components.

"peerDependencies": {
  "@floating-ui/dom": "1.6.13",
  "@lottiefiles/lottie-player": "^2.0.12",
  "auto-text-size": "0.2.3",
  "dayjs": "1.11.13",
  "anchorme": "2.1.2",
  "scroll-into-view-if-needed": "3.1.0",
  "simplebar-core": "1.3.0",
  "swiper": "11.2.0",
  "vue": "3.5.10",
  "vue-router": "4.4.5"
}

Fonts

IK UI uses Open Sans font by default. You can add it to your project with the Google Fonts CDN, add the following code inside your project's <head /> tag:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"
/>

Icons

IK UI uses Font Awesome v7 SVG icons. You can add it to your project using cdn url, set the following option to createIkolUI:

app.ts

const ui = createIkolUI({
    config: { ICONS_CDN_URL: 'https://icons.ikui.dev/fa/7.1.0' },
});

app.use(ui);

Using library via CDN

You can also start using IK UI library via CDN, add the following code inside your project's <head /> or <body /> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.10/vue.global.prod.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@ikol/[email protected]/dist/ikol-ui.min.js"></script>

You can initialize your app entry then by using code snippet similiar to:

<div id="app">
  <ik-app>
    <h1>Hello World!</h1>
    <ik-button>Click Here</ik-button>
  </ik-app>
</div>
<script>
  Vue
    .createApp()
    .use(IKOL())
    .mount('#app');
</script>

All components, directives, etc. are registered globally in the app then.