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 1,000,000+ packages pre-installed, including vrembem with all npm packages installed. Try it out:

var vrembem = require("vrembem")

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

vrembem v1.24.1

A component library based on the BEM methodology.


A complete collection of all Vrembem components into a single comprehensive package for convenience.

npm version




<!-- Include styles -->
<link rel="stylesheet" href="">

<!-- Include scripts -->
<script src=""></script>

  // All Vrembem JS modules are loaded into the vrembem namespace


npm install vrembem


To include all Vrembem components into your styles, just import the vrembem package in your Sass manifest file.

@use "vrembem";

All component variables, functions and mixins are forwarded under their respective namespace and can be customized:

@use "vrembem" with (
  $button-padding: 1rem 2rem

Customize core variables which all components inherit from. The example below will prefix all components with vb- to help namespace styles:

@use "vrembem" with (
  $core-prefix-block: "vb-"


Import and initialize the components you'll need:

// Import all under the vb namespace
import * as vb from 'vrembem';
const drawer = new vb.Drawer({ autoInit: true });

// Or import individual components
import { Drawer } from 'vrembem';
const drawer = new Drawer({ autoInit: true });

Note that core modules do not need to be initialized since they're just a set of helpful utility and functional modules.


Include the component's markup into your project. Use the online documentation for more information, customization options, code examples and available modifiers.

<div class="drawer__wrapper">
  <aside data-drawer="[unique-id]" class="drawer">
    <div class="drawer__item">
      <button data-drawer-close>...</button>
  <div class="drawer__main">
    <button data-drawer-toggle="[unique-id]">...</button>


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