Getting started

Introduction

Orvain UI is a component system for React and Vue with a matching Figma library. Both are built on the same design tokens, so a design and its implementation use the same names and values.

Overview#

Start with the free components, or read the foundations to see the tokens every component is built on.

How it's built#

• A tree-shakeable core under 12 kB gzipped.
• Components are safe to render in React Server Components.
• One token file sets colour, radius, spacing and type for every component.
• The same props and variants are available to AI coding tools through the MCP server.

Free components#

45 components in 7 categories are free to use, with no account or licence key. See the component overview for the full list.

Installation#

The free components install from npm, for React or for Vue.

1. Install the package

   Terminal

   npmpnpmyarnbun

   Copy

   $ npm install @orvain/react
   # or
   $ npm install @orvain/vue

2. Import the styles

   Once, at the root of your app (for example in app/layout.tsx):

   app/layout.tsxCopy

   import "@orvain/react/style.css";

3. Add components from the full library

   The full library comes with a licence key. Sign in with it once, then add components by name. The CLI copies their source into your project:

   TerminalCopy

   $ npx @orvain/cli login <your-licence-key>
   $ npx @orvain/cli add flat-button

Quick start#

Import a component and render it. Props are fully typed:

import { FlatButton } from "@orvain/react";
 
export default function Page() {
  return <FlatButton label="Get started" />;
}

Editor and MCP#

The MCP server gives AI coding tools such as Cursor and Claude Code the real props, variants and accessibility rules of each component, so generated code matches the library.

See Editor and MCP for setup and what the server exposes.

Next steps#

Browse the component reference, or set up your theme in the foundations.