Orvain UI
Use cases

How does Orvain UI help front-end developers?

Orvain UI gives developers 46 free components and 212 blocks for React and Vue, theming by tokens, tree-shakeable code that is safe in React Server Components, and accessibility documented per component.

By the Orvain team. Orvain UI is made by Oussema Ajmi, founder. Published October 4, 2026, updated October 4, 2026.

Orvain's Figma library is finished and available. The React and Vue code library and the MCP server are still being built, so anything below about generated code or the MCP server describes what is being shipped, not something you can install today.

What do developers get?#

  • 46 free components, each with props, a live playground and an accessibility tab.
  • 212 blocks in 46 families, each with React and Vue code.
  • Tree-shakeable React that is safe in React Server Components.
  • Tokens for colour, type, spacing and radius, so one change re-themes everything.

Does it work for both React and Vue?#

Yes, from the same tokens and the same Figma source. Each block page shows the React and Vue code side by side, so you take the one you ship.

How is accessibility handled?#

Every component documents its keyboard behaviour, semantics, measured contrast and motion in an Accessibility tab. It is a checklist you can verify, not a general claim.

How do I start?#

Browse the free components, try one in its playground, then look at the block families for finished screens. The pricing page says what is free and what is paid.

Questions#

Is it safe to use in Next.js with server components?

The React package is tree-shakeable and safe in React Server Components, so importing one component does not pull the library into the client bundle.

Do I own the code I copy from a block?

The licence page sets out what you may do with each part of Orvain UI, and it is the authority on this question.

Related#