@orvain/react

The free components of Orvain UI for React: 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/react

Peer dependency: react and react-dom, ^18 or ^19.

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/react/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

import { FlatButton, Input } from '@orvain/react';

export function Example() {
  return (
    <>
      <Input label="Email address" placeholder="[email protected]" />
      <FlatButton label="Save changes" />
    </>
  );
}

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.