What is Orvain UI?
Orvain UI is a design system for React and Vue that keeps a Figma library, a code library and a hosted MCP (Model Context Protocol) server on one component contract, so designers, developers and AI coding tools all work from the same description of every component. It includes 46 free components, 212 production-ready blocks and a token layer you override to match your brand.
By the Orvain team. Orvain UI is made by Oussema Ajmi, founder. Published October 4, 2026, updated October 4, 2026.
What does Orvain UI include?#
- 46 free components across 7 categories, documented with props, accessibility notes and a live playground.
- 212 blocks in 46 families (sign-in screens, tables, calendars, metrics, forms and more), each with React and Vue code.
- A Figma library with 600+ components, 11,000+ variants and 130+ design tokens in one file.
- A hosted MCP server that gives AI coding tools the real component API: props, variants, tokens and usage patterns.
- White-label design tokens: colour, type, spacing and radius resolve from one configuration, so one change re-themes everything.
Who is Orvain UI for?#
Product designers who want a Figma library whose names and variants match the code. Front-end and full-stack developers who ship React or Vue and want accessible components they can theme. Teams building with AI coding tools such as Cursor, Claude Code, Windsurf and v0 who are tired of invented props. Agencies and studios that run several brands from one system.
It is a poorer fit if you need the widest possible catalogue of components on day one, or a system with a long production track record. The comparison pages say so in detail.
What makes Orvain UI different from other design systems?#
Most design systems are two artefacts kept in step by hand: a Figma file and a code package. Orvain treats the component as one contract (props, variants, token names) and shares it between the file and the code, so they cannot quietly drift apart.
The second difference is the audience. The system is written to be read by AI coding tools as well as by people, through an MCP server that answers questions about the real API, so an assistant checks a prop before it writes it instead of guessing from training data.
Which frameworks and tools does Orvain UI work with?#
Who makes Orvain UI?#
Orvain UI is designed and built by Oussema Ajmi, who has more than ten years of experience designing and building products. Contact details are on the about page.
What can I use today?#
The Figma library is finished and available. The free component documentation is public and needs no account. The React and Vue code library and the MCP server are still being built, and the pricing page says what is for sale and when.
Questions#
Is Orvain UI free?
Partly. The 46-component set in the documentation is free and needs no account. The Figma library, the full block library and the MCP server are paid.
Can I use Orvain UI in client and commercial projects?
Yes. The licence covers unlimited personal and commercial projects, including client work, for one person. You may not resell or share the Figma file itself. The licence page has the full terms.
How is Orvain UI different from shadcn/ui?
shadcn/ui copies component source into your repository and is free, enormous and battle-tested. Orvain shares one component contract between Figma, code and an MCP server, and covers React and Vue. The comparison page sets the two side by side, including where shadcn/ui is the better choice.
Related#
- What is an AI-native design system?: the idea Orvain is built around.
- Orvain UI vs shadcn/ui: an honest side-by-side.
- About Orvain: who is behind it.
- Pricing: what is free and what is paid.