All Projects → balmjs → Balm Ui

balmjs / Balm Ui

Licence: mit
♦️ A modular and customizable UI library based on Material Design and Vue

Programming Languages

184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Balm Ui

🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+24775.94%)
Mutual labels:  material-design, ui-kit, vue-components, material-components
Vue Material Kit
Vue Material Kit - Open Source Material Design UI Kit
Stars: ✭ 231 (+73.68%)
Mutual labels:  material-design, ui-kit, vue-components, scss
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 2,487 (+1769.92%)
Mutual labels:  design-systems, ui-kit, vue-components
Vue Material Dashboard
Vue Material Dashboard - Open Source Material Design Admin
Stars: ✭ 403 (+203.01%)
Mutual labels:  material-design, vue-components, scss
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+15005.26%)
Mutual labels:  material-design, vue-components, material-components
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (+163.91%)
Mutual labels:  material-design, ui-kit, material-components
A high quality UI Toolkit built on Vue.js 2.0
Stars: ✭ 23,930 (+17892.48%)
Mutual labels:  design-systems, ui-kit, vue-components
React Native Paper
Material Design for React Native (Android & iOS)
Stars: ✭ 8,714 (+6451.88%)
Mutual labels:  material-design, ui-kit
Vuestic Admin
Free and Beautiful Vue 3 Admin Template
Stars: ✭ 8,398 (+6214.29%)
Mutual labels:  ui-kit, vue-components
Shards Dashboard
🔥A beautiful Bootstrap 4 admin dashboard templates pack.
Stars: ✭ 1,143 (+759.4%)
Mutual labels:  material-design, ui-kit
A theme engine for Android
Stars: ✭ 1,319 (+891.73%)
Mutual labels:  material-design, material-components
Material Design Lite
Material Design Components in HTML/CSS/JS
Stars: ✭ 31,931 (+23908.27%)
Mutual labels:  material-design, material-components
Material Design Components in Pure CSS. Materializing HTML at just one class per component 🍰
Stars: ✭ 888 (+567.67%)
Mutual labels:  material-design, material-components
Material Components Web Elm
Material Components for Elm
Stars: ✭ 73 (-45.11%)
Mutual labels:  material-design, material-components
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+7015.04%)
Mutual labels:  material-design, ui-kit
Design System Starter
🚀 The Australian Government Design System - Starter
Stars: ✭ 61 (-54.14%)
Mutual labels:  design-systems, scss
Material Components
Documentation and policies for Material Components (all platforms)
Stars: ✭ 872 (+555.64%)
Mutual labels:  material-design, material-components
Design system for the modern web.
Stars: ✭ 77 (-42.11%)
Mutual labels:  design-systems, scss
Maz Ui
Stand-alone components library to build your interfaces with Vue.JS & Nuxt.JS
Stars: ✭ 109 (-18.05%)
Mutual labels:  vue-components, scss
Easy customizable picker for all your needs in Android application
Stars: ✭ 105 (-21.05%)
Mutual labels:  material-design, material-components

BalmUI BalmUI version MDC version

Next Generation Material UI for Vue.js


BalmUI is a modular and customizable Material Design UI library for Vue.js.

🎉 NOW, [email protected] (v9.0) supports for Vue 3.0


  • Enterprise-class UI designed for web applications
  • A set of high-quality Vue components/plugins/directives/utils out of the box
  • Powerful theme customization in every detail
  • Integrated a complete set of the latest Material Icons
  • All components and plugins is highly customizable, and can be used individually

Documentation & Demos

Quick Start


1. For Balm CLI (Recommended)

1.0 Create a project

balm init vue my-project
cd my-project

1.1 Installing balm-ui

yarn add balm-ui
# OR
npm install --save balm-ui

1.2 Configuration

update balm.config.js

  • get Material Icons without downloading (or, download and extract to my-project/app/fonts)

    const api = (mix) => {
      if (mix.env.isDev) {
        mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');
  • edit my-project/config/balmrc.js for using Dart Sass

    module.exports = {
      styles: {
        extname: 'scss',
        dartSass: true
      // Other Options...

1.3 Usage

Default Usage
  • edit my-project/app/styles/global/_vendor.scss

    /* import BalmUI styles */
    @use 'balm-ui/dist/balm-ui';

    Recommend to use Sass in /path/to/project-name/styles/_vendor.scss, and you can use more advanced style usage of the BalmUI.

  • edit my-project/app/scripts/main.js

    import Vue from 'vue';
    import BalmUI from 'balm-ui'; // Official Google Material Components
    import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components
    Vue.use(BalmUI); // Mandatory
    Vue.use(BalmUIPlus); // Optional
Standalone Usage
  • edit my-project/app/styles/global/_vendor.scss

    @use 'balm-ui/components/core';
    @use 'balm-ui/components/button/button';
    @use 'balm-ui/components/icon/icon';
    @use 'balm-ui/components/dialog/dialog';
    @use 'balm-ui/plugins/alert/alert';
  • edit my-project/app/scripts/main.js

    import Vue from 'vue';
    import UiButton from 'balm-ui/components/button';
    import $alert from 'balm-ui/plugins/alert';

1.4 Development and testing

npm run dev
  • edit a vue component: my-project/app/scripts/views/components/hello.vue

      <div class="hello">
        <!-- Add a test button -->
        <ui-button @click="$alert('Hello BalmUI')">Click Me</ui-button>

1.5 Bundling and deployment

npm run prod

2. For Vue CLI

2.0 Create a project

vue create my-project
cd my-project

2.1 Installing balm-ui

yarn add balm-ui
# OR
npm install --save balm-ui

2.2 Configuration

  • edit my-project/vue.config.js

    module.exports = {
      runtimeCompiler: true,
      // NOTE: set alias via `configureWebpack` or `chainWebpack`
      configureWebpack: {
        resolve: {
          alias: {
            'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',
            'balm-ui-css': 'balm-ui/dist/balm-ui.css'
      // chainWebpack: (config) => {
      //   config.resolve.alias
      //     .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')
      //     .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');
      // }

2.3 Usage

  • edit my-project/src/main.js

    import Vue from 'vue';
    import App from './App.vue';
    import BalmUI from 'balm-ui'; // Official Google Material Components
    import BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components
    import 'balm-ui-css';
    Vue.config.productionTip = false;
    Vue.use(BalmUI); // Mandatory
    Vue.use(BalmUIPlus); // Optional
    new Vue({
      render: (h) => h(App)

3. For <script>

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello BalmUI</title>
    <div id="app">
      <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello BalmUI'

Enjoy 👻


We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.

Browser support

We officially support the last two versions of every major browser. Specifically, we test on the following browsers:

  • Chrome on Android, Windows, macOS, and Linux
  • Firefox on Windows, macOS, and Linux
  • Safari on iOS and macOS
  • Edge on Windows
  • IE 11 on Windows

Special Thanks to

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].