Getting Started

What is Revel?

Revel is the design system used by designers and developers at Rebilly to build clean, elegant, and performant experiences for its merchants.

Resources

Figma

Revel UI Kit (WIP)

Components

1. Install from npm

yarn add @rebilly/revel

2. Import the stylesheet

import '@rebilly/revel/dist/style.css'

3. Import and use components

<template>
  <r-button>Click Me!</r-button>
</template>

<script>
import { rButton } from '@rebilly/revel';

export default {
  name: 'Example',
  components: { rButton },
};
</script>

4. Optionally register all components and directives globally

import { createApp } from 'vue';
import revel from '@rebilly/revel';
import App from './App.vue';

const app = createApp(App)

// Revel exports a plugin which registers all
// components and directives globally
app.use(revel);

app.mount('#app');