Skip to content
Lightweight UI components for Vue.js based on Bulma
Branch: dev
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci CircleCI config updated (#628) Feb 20, 2018
.github Refactoring build (and add single components) and new docs Aug 8, 2018
docs Typo in MDI url. Forgot 'https:' (#1298) Mar 22, 2019
src Revert "Fix changing Switch states with space key in Firefox (#1285)" ( Mar 21, 2019
static Refactoring build (and add single components) and new docs Aug 8, 2018
types Add notification programmatic Mar 20, 2019
.babelrc Fix code coverage Mar 8, 2018
.eslintignore Docs improvement (#474) Dec 14, 2017
.eslintrc.js Disable attributes-order now, but enable in the future Mar 8, 2018
.gitignore Refactoring build (and add single components) and new docs Aug 8, 2018 Update Backers Mar 7, 2019 Improve message accessibility Mar 20, 2019
LICENSE Update license Jan 16, 2019 Add twitter link Feb 16, 2019
index.html Update domain links Feb 13, 2019
jsconfig.json Update changelog and some consistency fixes Jun 27, 2017
package-lock.json Adding draggable to table rows (#1250) Mar 5, 2019
yarn.lock Add unit test for Autocomplete, Checkbox and CheckboxButton (#1012) Oct 19, 2018

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.


  • Keep your current Bulma theme / variables easily
  • Supports both Material Design Icons and FontAwesome
  • Very lightweight with none internal dependencies aside from Vue & Bulma
  • About 60KB min+gzip (with Bulma included)
  • Semantic code output
  • Follows Bulma design and some of the Material Design UX
  • Focus on usability and performance without over-animating stuff


The documentation is in the docs directory, it serves as the demo as well.

Browse online documentation here.

Quick start

You need Vue.js version 2.5+.

1 Install via npm

npm install buefy

2 Import and use Buefy


import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';


or Individual Components

import Vue from 'vue'
import { Field, Input } from 'buefy/dist/components'
import 'buefy/dist/buefy.css'



import Vue from 'vue'
import Field from 'buefy/dist/components/field'
import Input from 'buefy/dist/components/input'
import 'buefy/dist/buefy.css'


3 Include Material Design Icons

<link rel="stylesheet" href="//">

If you want to customize the icons or the theme, refer to the customization section on the documentation.

Alternatively, you can use a CDN or even download

<!-- Buefy CSS -->
<link rel="stylesheet" href="">

<!-- Buefy JavaScript -->
<script src=""></script>

Browser support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+ is only partially supported.


While it's still in beta, version will follow v0.Y.Z, where:

  • Y: Major (breaking changes)
  • Z: Minor or patch


Supporting through Patreon

Buefy is an open source MIT project if you are interested in supporting this project, please consider becoming a patron.

Become a Patron


Code released under MIT license.

Copyright (c), Rafael Beraldo.

You can’t perform that action at this time.