Question 1

What is Orvain UI?

Accepted Answer

Orvain UI is a design system for React and Vue with a matching Figma library and a hosted MCP server. It ships 45 free components across 7 categories, 241 production-ready blocks in 49 families, and a token layer you override to make the whole system match your brand.

Question 2

Which frameworks does Orvain UI support?

Accepted Answer

React and Vue, from the same design tokens and the same Figma source. The React package is tree-shakeable and safe to use in React Server Components, so importing one component does not pull the library into your client bundle.

Question 3

What is the difference between a component and a block?

Accepted Answer

A component is a single primitive, a button, an input, a checkbox. A block is a finished piece of interface built from those primitives, like a pricing table, a sign-in screen or a data table with filters. Orvain UI has 45 components and 241 blocks, and every block is assembled from the components rather than drawn separately, so theming one themes both.

Question 4

Is Orvain UI free?

Accepted Answer

Yes, in part. The 45-component set in the documentation is free forever and needs no account. The Figma library, the full block library and the MCP server are paid, and the Figma library is a one-time purchase rather than a subscription.

Question 5

How much does Orvain UI cost?

Accepted Answer

The free components cost nothing and need no account. The code library, with the full block library, the CLI and the hosted MCP server, is $179 (Solo), $449 (Studio) or $899 (Business) a year, including updates while renewed, or a one-time $349 (Solo), $899 (Studio) or $1,799 (Business) for the version available on the day you buy. The Figma library is a one-time $199 (Solo), $499 (Studio) or $999 (Business), and the bundle of code and Figma is a one-time $449 (Solo), $1,190 (Studio) or $2,390 (Business). Solo covers 1 person, Studio covers up to 8 people, Business covers up to 20 people. Prices are in US dollars.

Question 6

How do I install Orvain UI?

Accepted Answer

Install the free components from npm with npm install @orvain/react or npm install @orvain/vue, and import @orvain/react/style.css once at the root of your app. The full library comes with the licence key from your purchase: run npx @orvain/cli login <licence-key> once, then add components by name, for example npx @orvain/cli add flat-button.

Question 7

Can I white-label Orvain UI for my own brand?

Accepted Answer

Yes. Colour, typography, spacing and radius are all design tokens, so changing the token values re-themes every component, every block and the Figma file together. Nothing is hard-coded to the Orvain palette, which is what makes the system usable for agencies running several brands at once.

Question 8

What is the Orvain MCP server?

Accepted Answer

The Orvain MCP server is a hosted Model Context Protocol endpoint that gives AI coding tools live access to the real component API: the props, the tokens, the variants and the usage patterns. MCP is an open standard for connecting AI assistants to external tools and data.

Question 9

Why does an AI coding tool need an MCP server for a design system?

Accepted Answer

Because without one it guesses. An assistant working from training data invents props that do not exist and imports paths that were never published, and the code looks right until it is run. Pointed at the MCP server, the same assistant reads the current API and writes against what the library actually exports.

Question 10

Which AI tools work with Orvain UI?

Accepted Answer

Any client that speaks the Model Context Protocol, which includes Cursor, Claude Code and v0. The server is hosted, so connecting it is a URL in your tool's MCP settings rather than something to install and run yourself.

Question 11

How do I connect the Orvain MCP server to Cursor or Claude Code?

Accepted Answer

Point the tool at https://mcp.orvain.dev over Streamable HTTP and send your licence key as an Authorization: Bearer header. In Claude Code that is one command: claude mcp add --transport http orvain https://mcp.orvain.dev --header "Authorization: Bearer <licence-key>". In Cursor it is an "orvain" entry with that URL and header in ~/.cursor/mcp.json. The MCP docs have both in full.

Question 12

Do I own the code I copy from Orvain UI?

Accepted Answer

Yes. Copied block and component source is yours to keep and modify, with no attribution required and no runtime dependency on Orvain. Your project does not break if you later stop paying, because the code already lives in your repository.

Question 13

Is the Figma library a subscription?

Accepted Answer

No. The Figma library is a one-time purchase and the file is yours permanently, including the updates published while your licence is active.

Question 14

Do the Figma library and the code library stay in sync?

Accepted Answer

Yes, by construction. Both read the same token set and the same component names, and the Figma components are built with variables and variants that map one-to-one to the code props, so a handoff is a lookup rather than a translation.

Question 15

How do I contact the Orvain UI team?

Accepted Answer

Email hello@contactoussema.uk, or use the contact page. We typically reply within one business day.

Frequently asked
questions.

The design system

AI tools and the MCP server

Licensing and support

Premium components,
free in your inbox.

Frequently asked questions.

The design system

AI tools and the MCP server

Licensing and support

Premium components, free in your inbox.

Frequently askedquestions.

The design system

AI tools and the MCP server

Licensing and support

Premium components,free in your inbox.

Frequently asked questions.

The design system

AI tools and the MCP server

Licensing and support

Premium components, free in your inbox.

Frequently asked
questions.

Premium components,
free in your inbox.