Keen UI

Vue Lightweight collection of UI components inspired by Material Design

6.1K Added Jan 3, 2019

Keen UI is a lightweight Vue.js UI library with a simple API. The design is inspired by Google's Material Design.

Installation

npm install keen-ui --save

Usage

ES6

Use as a plugin (registers all components with Vue globally):

import Vue from 'vue';
import KeenUI from 'keen-ui';
import 'keen-ui/dist/keen-ui.css';

Vue.use(KeenUI);

new Vue({
    components: {
        // all Keen UI components already registered
    }
});

Use individual components:

import Vue from 'vue';
import { UiAlert, UiButton } from 'keen-ui';

new Vue({
    components: {
        UiAlert,
        UiButton
    }
});

Globals (script tag)

First, add a stylesheet link to the Keen UI CSS file in dist/keen-ui.min.css. Then, add a script tag pointing to dist/keen-ui.min.js after adding Vue.

If Keen UI detects Vue globally, all the components will be registered automatically. The components will also be made available globally via window.KeenUI.

<!-- Place this in the <head> -->
<link rel="stylesheet" href="path/to/keen-ui.min.css">

<!-- Place this in the <body> -->
<div id="app">
    <ui-button>Hello world!</ui-button>
</div>

<script src="path/to/vue.js"></script>
<script src="path/to/keen-ui.min.js"></script>
<script>
    new Vue({
        el: '#app',
        components: {
            // all Keen UI components already registered
        }
    });
</script>