Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including balm-ui with all npm packages installed. Try it out:

require("vue/package.json"); // vue is a peer dependency. var balmUi = require("balm-ui")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

balm-ui v0.8.1

Next Generation Material UI for Vue.js

BalmUI NPM version

Next Generation Material UI for Vue.js

What is BalmUI?

Following the Material Design UI components for the web specification, we developed a BalmUI library antd that contains a set of high quality components and demos for building rich, interactive user interfaces.

Demos & Documentation(updated with every release)

Quick Start

0. Requirement

1. Install

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

2. Config

Edit my-project/app/styles/global/_vendor.scss

/* Add BalmUI styles */
@import 'node_modules/balm-ui/src/styles/balm-ui.scss';

Download Material Design Icons and extract to /path/to/my-project/app/fonts.

3. Usage

Edit my-project/app/scripts/main.js

3.1 Default Usage

import Vue from 'vue';
import BalmUI from 'balm-ui'; // Mandatory
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // Optional

Vue.use(BalmUI); // Mandatory
Vue.use(BalmUIPlus); // Optional

3.2 Standalone Usage

import Vue from 'vue';
import UiButtonComponents from 'balm-ui/components/button';

// (Recommended) Splitting CSS out from the main application, see BalmUI advanced usage.
import 'balm-ui/components/core.css';
import 'balm-ui/components/button.css';
import 'balm-ui/components/icon.css'; // Optional.


Enjoy 👻

Reusability & Composition


  • Layouts
    • Layout Grid
    • Toolbar (:skull:)
    • Top App Bar (migrate from Toolbar)
    • Drawer
    • Tabs
  • Buttons
    • Button
    • Floating Action
    • Icon Toggle (:skull:)
    • Icon Button (migrate from Icon Toggle)
  • Icon
  • Data View
    • List
    • Grid List (:skull:)
    • Image List (migrate from Grid List)
    • Card
    • Chips
    • Pagination (:bulb:)
  • Linear Progress
  • Inputs and Controls
    • Text Field
    • Checkbox
    • Radio
    • Select
    • Switch
    • Slider
    • Dropdown (:bulb:)
    • Autocomplete (:bulb:)
    • File (:bulb:)
  • Modal
    • Dialog
    • Snackbar
  • Menu


  • Event
  • Grid (TODO)
  • Typography
  • Theme
  • Validator (:bulb:)
  • Alert (:bulb:)
  • Confirm (:bulb:)
  • Toast (:bulb:)


  • Ripple
  • Elevation
  • Shape
  • Anchor (:bulb:)


  • Type Detections
  • Helper Functions
  • IE Detection

:bulb:: Plus UI, :skull:: Deprecated


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

Thank you

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free