Keen-UI 0,0,2,8,0,8 editorconfig Bower npm webpack

A lightweight collection of essential UI components written with Vue and inspired by Material Design

2 years after MIT

Keen UI

A lightweight collection of essential UI components written with Vue and inspired by Material Design.

Keen UI is designed to be a lightweight Vue.js UI library with a simple API. Though the design is inspired by Google's Material Design, Keen UI is not meant to be a full implementation of the spec.

Keen UI is not a CSS framework, and as such you won't find a grid system or styles for typography in it. Instead, the focus is on creating reusable components that have interactivity.

Documentation and demo



Browser support

IE 10+ (due to Flexbox support).


NPM (recommended)

npm install keen-ui --save


bower install keen-ui --save


Make sure to include either the dist/keen-ui.css or dist/keen-ui.min.css file if you are not using individual components from lib/ as the styles have been extracted into a single CSS file.

CSS Reset

Before using Keen UI, ensure that the following CSS resets are applied to your site.

*::after {
    box-sizing: border-box;

html {
    font-size: 100%;

You can add it to your stylesheet manually (before other styles), or, if you are using a CSS framework, check to see if the framework already includes a reset (most CSS frameworks do). The root font size can be customized to globally resize the components.


The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

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

import Vue from 'vue';
import KeenUI from 'keen-ui';


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: {

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 on the global window.KeenUI object.


    <link rel="stylesheet" href="path/to/keen-ui.min.css">
    <div id="app">
        <ui-button>Hello world!</ui-button>

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

Using standalone individual components

Each component has been compiled as a self-contained file which you can use without importing the rest of the library. The standalone files are located in the lib/ folder and they contain their own CSS which will be added as <style> tags in <head>.

NOTE: Files in the lib/ folder contain all their own dependencies and a lot them contain overlapping dependencies. As such, using multiple files from lib/ could significantly increase the size of your bundle due to duplicate code, and is not recommended unless you are using only a handful of components. This may be fixed by minification, but I haven't tested.


The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.

import Vue from 'vue';
import 'keen-ui/src/bootstrap'; // Required when using components from `lib/`, should be imported only once in your project
import UiButton from 'keen-ui/lib/UiButton';

new Vue({
    components: {


  • [ ] Test browser compatibility (IE 10+)
    • [x] Chrome, IE, Edge, Firefox on Windows
    • [ ] Chrome, Safari, Firefox on macOS
  • [x] Add new components
    • [x] Tooltip
    • [x] Slider
    • [x] Select
    • [x] Datepicker
    • [x] File upload
  • [x] Add customization guide
  • [ ] Add unit tests


Keen UI is open source and released under the MIT Licence.

Copyright (c) 2016-2017 Josephus Paye II.

PS: I would love to know how you're using Keen UI. Tweet to me at @JosephusPaye.

Related Repositories



Vue相关开源项目库汇总 ...



Data Explorer by Keen IO - point-and-click interface for analyzing and visualizi ...



A subtle dark colored UI theme for Atom. ...



Official iOS client for the Keen IO API. Build analytics features directly into ...



My personal collection of Vue UI framework ...

Top Contributors

JosephusPaye qetee citycide


package version
autosize ^3.0.20
deep-assign ^2.0.0
fuzzysearch ^1.0.3
lodash.debounce ^4.0.8
tether-drop ^1.4.2
tether-tooltip ^1.2.0
dev autoprefixer ^6.5.4
babel-core ^6.0.0
babel-loader ^6.0.0
babel-plugin-transform-runtime ^6.0.0
babel-preset-es2015 ^6.0.0
babel-preset-stage-2 ^6.0.0
cross-env ^3.0.0
css-loader ^0.25.0
eslint ^3.12.0
eslint-config-xo ^0.17.0
eslint-formatter-pretty ^1.1.0
eslint-plugin-html ^1.7.0
eslint-plugin-no-use-extend-native ^0.3.12
eslint-plugin-promise ^3.4.0
eslint-plugin-unicorn ^1.0.0
extract-text-webpack-plugin 2.0.0-beta.5
node-sass ^3.13.0
prismjs ^1.5.1
rimraf ^2.5.4
sass-loader ^4.0.2
vue ^2.1.7
vue-loader ^10.0.2
vue-router ^2.1.0
vue-style-loader ^1.0.0
vue-template-compiler ^2.1.7
webpack ^2.2.0
webpack-dev-server ^2.2.0


-   v0.8.9 zip tar
-   v0.8.8 zip tar
-   v0.8.6 zip tar
-   v0.8.5 zip tar
-   v0.8.4 zip tar
-   v0.8.3 zip tar
-   v0.8.2 zip tar
-   v0.8.1 zip tar
-   0.8.7 zip tar