Keen-UI
A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.
Top Related Projects
🐉 Vue Component Framework
A Vue.js 2.0 UI Toolkit for Web
Lightweight UI components for Vue.js based on Bulma
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Next Generation Vue UI Component Library
Quasar Framework - Build high-performance VueJS user interfaces in record time
Quick Overview
Keen-UI is a lightweight collection of essential UI components written with Vue.js and inspired by Material Design. It provides a set of reusable components for building interactive web interfaces, focusing on simplicity and ease of use.
Pros
- Lightweight and modular, allowing developers to use only the components they need
- Follows Material Design principles, providing a modern and consistent look
- Well-documented with examples and API references for each component
- Easy to customize and extend to fit specific project requirements
Cons
- Not as comprehensive as some larger UI frameworks
- Limited theme customization options out of the box
- Less frequent updates compared to more popular Vue.js UI libraries
- May require additional styling effort for complex layouts
Code Examples
- Using a UiButton component:
<template>
<ui-button color="primary" raised>Click me</ui-button>
</template>
<script>
import { UiButton } from 'keen-ui'
export default {
components: {
UiButton
}
}
</script>
- Creating a form with UiTextbox and UiSelect:
<template>
<form @submit.prevent="submitForm">
<ui-textbox v-model="name" label="Name" />
<ui-select v-model="country" :options="countries" label="Country" />
<ui-button type="submit">Submit</ui-button>
</form>
</template>
<script>
import { UiTextbox, UiSelect, UiButton } from 'keen-ui'
export default {
components: {
UiTextbox,
UiSelect,
UiButton
},
data() {
return {
name: '',
country: '',
countries: [
{ label: 'USA', value: 'us' },
{ label: 'Canada', value: 'ca' },
{ label: 'UK', value: 'uk' }
]
}
},
methods: {
submitForm() {
// Handle form submission
}
}
}
</script>
- Using UiModal for a dialog:
<template>
<div>
<ui-button @click="openModal">Open Modal</ui-button>
<ui-modal v-model="isModalOpen" title="Confirmation">
<p>Are you sure you want to proceed?</p>
<template #footer>
<ui-button @click="confirmAction">Confirm</ui-button>
<ui-button @click="isModalOpen = false">Cancel</ui-button>
</template>
</ui-modal>
</div>
</template>
<script>
import { UiButton, UiModal } from 'keen-ui'
export default {
components: {
UiButton,
UiModal
},
data() {
return {
isModalOpen: false
}
},
methods: {
openModal() {
this.isModalOpen = true
},
confirmAction() {
// Handle confirmation
this.isModalOpen = false
}
}
}
</script>
Getting Started
- Install Keen-UI:
npm install keen-ui
- Import and use components in your Vue.js application:
import Vue from 'vue'
import KeenUI from 'keen-ui'
import 'keen-ui/dist/keen-ui.css'
Vue.use(KeenUI)
- Use Keen-UI components in your Vue templates:
<template>
<div>
<ui-button color="primary">Hello, Keen-UI!</ui-button>
</div>
</template>
Competitor Comparisons
🐉 Vue Component Framework
Pros of Vuetify
- Larger community and more frequent updates
- Comprehensive Material Design implementation
- Extensive documentation and examples
Cons of Vuetify
- Larger bundle size
- Steeper learning curve for beginners
- More opinionated design, less flexibility
Code Comparison
Keen-UI button example:
<UiButton
color="primary"
raised
@click="handleClick"
>
Click me
</UiButton>
Vuetify button example:
<v-btn
color="primary"
elevation="2"
@click="handleClick"
>
Click me
</v-btn>
Both Keen-UI and Vuetify are Vue.js UI component libraries, but they differ in scope and implementation. Vuetify offers a more comprehensive set of components and follows Material Design principles closely. It has a larger community, more frequent updates, and extensive documentation. However, this comes at the cost of a larger bundle size and a steeper learning curve.
Keen-UI, on the other hand, is lighter and more flexible, making it easier for beginners to adopt. It provides essential UI components without strictly adhering to a specific design system. This allows for more customization but may require more effort to achieve a cohesive look.
The code comparison shows similar syntax for creating buttons in both libraries, with minor differences in prop names and component prefixes.
A Vue.js 2.0 UI Toolkit for Web
Pros of Element
- Larger community and more frequent updates
- More comprehensive component library
- Better internationalization support
Cons of Element
- Steeper learning curve due to more complex API
- Larger bundle size, which may impact performance
- Less flexibility for customization compared to Keen-UI
Code Comparison
Element:
<el-button type="primary" @click="handleClick">
Click me
</el-button>
Keen-UI:
<ui-button color="primary" @click="handleClick">
Click me
</ui-button>
Both Element and Keen-UI are Vue.js UI component libraries, but they differ in scope and approach. Element offers a more extensive set of components and is widely adopted in the Vue community. It provides better documentation and examples, making it easier for developers to get started. However, this comes at the cost of a larger bundle size and potentially more complex usage.
Keen-UI, on the other hand, focuses on simplicity and flexibility. It offers a smaller set of core components that can be easily customized. This makes it a good choice for projects that require a lightweight solution or need more control over the look and feel of the components. However, developers may need to implement additional functionality themselves, as Keen-UI's component library is not as comprehensive as Element's.
Lightweight UI components for Vue.js based on Bulma
Pros of Buefy
- More comprehensive component library with a wider range of UI elements
- Active development and frequent updates
- Better documentation and examples
Cons of Buefy
- Larger bundle size due to more components
- Steeper learning curve for beginners
- Less flexibility in customization compared to Keen-UI
Code Comparison
Keen-UI button example:
<ui-button color="primary" raised>
Click me
</ui-button>
Buefy button example:
<b-button type="is-primary" raised>
Click me
</b-button>
Both libraries offer similar syntax for basic components, but Buefy provides more built-in options and modifiers. Keen-UI focuses on simplicity and customization, while Buefy offers a more feature-rich experience out of the box.
Keen-UI is lightweight and easy to integrate into existing projects, making it ideal for developers who want more control over their UI components. Buefy, on the other hand, provides a more complete solution with a consistent design language based on Bulma CSS framework.
Ultimately, the choice between Keen-UI and Buefy depends on project requirements, team expertise, and desired level of customization.
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Pros of Bootstrap Vue
- Larger community and more frequent updates
- Comprehensive documentation and extensive component library
- Seamless integration with Bootstrap's CSS framework
Cons of Bootstrap Vue
- Heavier bundle size due to full Bootstrap integration
- Less customizable styling options out-of-the-box
- Steeper learning curve for developers unfamiliar with Bootstrap
Code Comparison
Keen UI button component:
<ui-button color="primary" raised>
Click me
</ui-button>
Bootstrap Vue button component:
<b-button variant="primary">
Click me
</b-button>
Both libraries offer similar component-based approaches, but Bootstrap Vue leverages Bootstrap's existing classes and structure. Keen UI provides more granular control over component styling through props like raised, while Bootstrap Vue relies on Bootstrap's predefined variants.
Bootstrap Vue is better suited for projects already using Bootstrap or requiring a comprehensive UI framework. Keen UI is ideal for developers seeking a lightweight, customizable component library with a focus on Material Design principles.
Next Generation Vue UI Component Library
Pros of PrimeVue
- Larger component library with more advanced UI elements
- Better documentation and examples
- More active development and frequent updates
Cons of PrimeVue
- Steeper learning curve due to more complex API
- Larger bundle size, potentially impacting performance
- Less flexibility for custom styling compared to Keen UI
Code Comparison
Keen UI button component:
<UiButton
color="primary"
raised
@click="handleClick"
>
Click me
</UiButton>
PrimeVue button component:
<Button
label="Click me"
class="p-button-raised p-button-primary"
@click="handleClick"
/>
Both libraries offer similar basic functionality, but PrimeVue tends to have more props and options for customization. Keen UI often requires less code for simple components, while PrimeVue provides more built-in features at the cost of slightly more verbose markup.
PrimeVue generally has a larger ecosystem and more frequent updates, making it suitable for larger projects with complex UI requirements. Keen UI, on the other hand, may be more appropriate for smaller projects or those requiring a lighter-weight solution with more control over styling.
Quasar Framework - Build high-performance VueJS user interfaces in record time
Pros of Quasar
- Comprehensive framework with a wide range of UI components and tools
- Built-in support for multiple platforms (web, mobile, desktop)
- Active development and large community support
Cons of Quasar
- Steeper learning curve due to its extensive feature set
- Potentially larger bundle size for simpler projects
- More opinionated structure, which may limit flexibility in some cases
Code Comparison
Keen-UI (Vue component):
<template>
<ui-button color="primary" @click="handleClick">Click me</ui-button>
</template>
Quasar (Vue component):
<template>
<q-btn color="primary" @click="handleClick">Click me</q-btn>
</template>
Both frameworks use similar component-based structures, but Quasar's components are prefixed with q- while Keen-UI uses ui-. Quasar generally offers more built-in props and features for each component, reflecting its more comprehensive nature.
Keen-UI is a lightweight Vue.js UI library focused on providing essential components with a clean, minimalist design. It's ideal for smaller projects or when you need more control over the styling and functionality of your components.
Quasar, on the other hand, is a full-featured framework that offers a complete solution for building cross-platform applications. It provides a wider range of components, layouts, and tools, making it suitable for larger, more complex projects that require extensive functionality across multiple platforms.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Keen UI
Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design.
Keen UI is not a CSS framework. Therefore, it doesn't include styles for a grid system, typography, etc. Instead, the focus is on interactive components that require Javascript. You should be able to use Keen UI with any page layout, structure, or CSS framework.
Documentation and demo
http://josephuspaye.github.io/Keen-UI/
Requirements
- Vue.js (v3)
- use keen-ui@0.8.9 for Vue 1.x support.
- use keen-ui@1.x for Vue 2.x support.
Optional
Browser support
Keen UI supports browsers with native ES2015 support (same as Vue 3).
Installation
npm install keen-ui --save
Usage
CSS Reset
Before using Keen UI, ensure that the following CSS resets are applied to your site.
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 100%;
}
You can add the reset to your stylesheet (before other styles). 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 set on <html> can be customized to globally resize the components.
ES6
Use as a Vue plugin (globally registers all components):
import { createApp } from "vue";
import * as KeenUI from "keen-ui";
import "keen-ui/keen-ui.css";
const app = createApp();
app.use(KeenUI);
Use individual components:
import { createApp } from "vue";
import { UiAlert, UiButton } from "keen-ui";
import "keen-ui/keen-ui.css";
const app = createApp({
components: {
UiAlert,
UiButton,
},
});
Global 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.
The library is made available globally via window.KeenUI so that you can use it on your app instance.
Example:
<!-- Place this in <head> -->
<link rel="stylesheet" href="path/to/keen-ui.min.css" />
<!-- Place this in <body> -->
<div id="app">
<ui-button>{{ message }}</ui-button>
</div>
<script src="path/to/vue.global.prod.js"></script>
<script src="path/to/keen-ui.min.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello world!",
};
},
});
app.use(KeenUI);
app.mount("#app");
</script>
Customization
You can customize many aspects of Keen UI, including theme colors, component sizes, default props, and more.
See Customization.
Using standalone components
Each component is built into a standalone file with all its dependencies included. You can use these individual standalone components without importing the rest of the library. The standalone components are located in the lib/ folder.
Note Standalone component files each contain their own dependencies, and many contain overlapping dependencies. As a result, using multiple standalone files may increase the size of your bundle due to duplicate code.
import { createApp } from "vue";
import "keen-ui/src/bootstrap"; // Required when using standalone components, should be imported only once in your project
import UiButton from "keen-ui/lib/UiButton";
import "keen-ui/css/UiButton.css";
const app = createApp({
components: {
UiButton,
},
});
Licence
Keen UI is open source and released under the MIT Licence.
Copyright (c) 2023 Josephus Paye II.
PS: Made something cool with Keen UI? I would love to know! Tweet to me at @JosephusPaye.
Top Related Projects
🐉 Vue Component Framework
A Vue.js 2.0 UI Toolkit for Web
Lightweight UI components for Vue.js based on Bulma
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Next Generation Vue UI Component Library
Quasar Framework - Build high-performance VueJS user interfaces in record time
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot