Installation

Contents

• Install Konsta UI
• Add Konsta UI Theme
• Roboto Font
• Usage

Install Konsta UI

We assume you already have a configured project with Vue and Tailwind CSS .

At first, we need to install the Konsta UI library:

npm i konsta

Add Konsta UI Theme

Then, we need to import Konsta UI theme file in your main CSS file:

@import 'tailwindcss';
/* import Konsta UI theme */
@import 'konsta/vue/theme.css';

Roboto Font

Konsta UI uses system font for iOS theme and Roboto font for Material Design theme.

If you develop a web app, you need to Roboto font to your app to display it correctly.

For example, it can be added from Google Fonts:

In HTML:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
  rel="stylesheet"
/>

Or in CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

Usage

After installation process is done let's check how to use Konsta UI components in our Vue application.