@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="[email protected]" />
  <FlatButton label="Save changes" />
</template>

What is included

| Group | Components | |---|---| | Actions | Button, Link Button, Ghost Button, Fancy Button, Button Group | | Displaying data | Avatar, Avatar Group, Badge, Tag, Fancy Tag, Table, Content Label, Content Divider, KBD, Progress Track, Gauge Track, Rating Bar | | Feedback | Alert, Toast, Tooltip, Banner | | Form | Checkbox, Radio, Switch, Input, Text Area, Dropdown, Slider, Range Slider, Date Picker, Color Picker, OTP Input, File Upload, File Type Icons, Hint | | Layout | Accordion, Breadcrumbs, Segmented Control, Horizontal and Vertical Tab Menus | | Navigation | Navbar, Pagination, Step Indicator | | Overlays | Command Menu, Confirm Modal, Popover |

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