@orvain/vue

@orvain/vue

The free components of Orvain UI for Vue: buttons, form fields, tables, tabs, alerts, modals and more, with accessible keyboard behaviour and light and dark themes.

Commercial software. See LICENSE. The free components may be used as described there. The full Orvain Library is a separate product at orvain.dev.

Install

npm install @orvain/vue

Peer dependency: vue ^3.5.2.

Setup

Import the design tokens once, at your application entry point:

import '@orvain/tokens/css';

Component styles load with the components, so there is nothing else to import. If your toolchain cannot import CSS from node_modules (CommonJS, Jest), import @orvain/vue/style.css instead.

Typeface

For the intended look, add Satoshi from Fontshare (free). Paste this once in your HTML <head>:

<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap" />

Satoshi is not included in the package: its licence does not allow handing the font file to others, so each project loads it from Fontshare. Without it, everything works and renders in your system font. More in the @orvain/tokens README.

Usage

<script setup lang="ts">
import { FlatButton, Input } from '@orvain/vue';
</script>

<template>
  <Input label="Email address" placeholder="you@example.com" />
  <FlatButton label="Save changes" />
</template>

What is included

The full Orvain Library has many more components and blocks. See orvain.dev.