# Orvain UI

> Orvain UI is a code-first design system for React and Vue with a matching Figma library and a hosted MCP (Model Context Protocol) server, so AI coding tools like Cursor, Claude Code, Windsurf and v0 build against the real component API instead of guessing. One import, white-label design tokens, strict TypeScript types, and a core bundle under 12 kB gzipped.

Key facts:

- Status: the Figma library, the React and Vue code library and the hosted MCP server are all available now.
- 45 free components for React and Vue, installed from npm (@orvain/react, @orvain/vue) with no account. The full library is added with the CLI and the licence key from purchase: npx @orvain/cli login <key>, then npx @orvain/cli add <component>.
- 11,000+ Figma variants and 130+ design tokens, mirrored 1:1 with the code, nested instances included.
- Hosted MCP server at https://mcp.orvain.dev (Streamable HTTP, licence key sent as Authorization: Bearer <key>): AI assistants query live component schemas (props, variants, tokens, accessibility contracts). Generations are validated against the real API, so invented props and imports are rejected before code is written.
- White-label theming: colors, radii, spacing and type resolve from one config file, and every component follows the brand.
- 217 production-ready blocks in 46 families, built from the same components and tokens.
- Pricing: 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. Plans and checkout: https://orvain.dev/pricing.

## Docs

- [Documentation](https://orvain.dev/docs): installation (npm install @orvain/react or @orvain/vue for the free components, npx @orvain/cli for the full library), quick start, MCP server setup for Cursor and Claude Code, and theming with white-label tokens.
- [Free components](https://orvain.dev/docs/components): the 45 components, grouped by what they are for.
- [Editor and MCP](https://orvain.dev/docs/mcp): what the Model Context Protocol is, why an assistant invents component props, and what a schema-backed server exposes instead.

## Product

- [Home](https://orvain.dev/): what Orvain UI is and how the pieces fit together.
- [Blocks](https://orvain.dev/blocks): the gallery of all 46 block families, each with live examples. Copied code is yours to keep.
- [AI tools](https://orvain.dev/ai-tools): the six AI tools built on the component surface: the hosted MCP server, component context, and guardrails.
- [White-label theming](https://orvain.dev/theming): how colour, radius, spacing and type resolve from design tokens, so a rebrand is one edit.
- [Changelog](https://orvain.dev/changelog): dated notes on what has shipped.
- [Figma library](https://orvain.dev/figma): every component, token, template and pattern in one Figma file that mirrors the code.
- [Pricing](https://orvain.dev/pricing): Solo, Studio and Business plans for the code library (yearly or one-time), the Figma library and the bundle of both, with checkout.
- [About](https://orvain.dev/about): who builds Orvain UI — its founder, Oussema Ajmi — and why it exists.

## Blocks by category

- [Data display blocks](https://orvain.dev/blocks/category/data-display): Tables, metric rows, kanban boards, calendars and trees — the blocks that put a record set on screen, and how to choose between them.
- [Form blocks and controls](https://orvain.dev/blocks/category/form-controls): Inputs, text areas, checkboxes, radios, switches, sliders and whole sign-in and settings forms — with the rules for which control fits which question.
- [Pickers and search blocks](https://orvain.dev/blocks/category/pickers-and-search): Date and time pickers, comboboxes, autocomplete, tag inputs, colour pickers, filters and file upload: controls for choosing from a set too large to show.
- [Navigation blocks](https://orvain.dev/blocks/category/navigation): Navbars, tab menus, tabs, breadcrumbs, pagination, command menus, dropdowns and context menus — and the difference between moving and switching.
- [Overlay and feedback blocks](https://orvain.dev/blocks/category/overlays-and-feedback): Modals, popovers, toasts, notification feeds, progress bars, spinners and onboarding tours: telling a reader what happened without losing their place.
- [Content and editor blocks](https://orvain.dev/blocks/category/content-and-editing): Rich text editors, code snippets, carousels and accordions — the blocks for content a reader reads, writes, or steps through.

## Concepts

- [What is Orvain UI?](https://orvain.dev/learn/what-is-orvain-ui): Orvain UI is a design system for React and Vue with a Figma library and a hosted MCP server, built so designers, developers and AI tools share one component source.
- [What is an AI-native design system?](https://orvain.dev/learn/what-is-an-ai-native-design-system): An AI-native design system exposes its components, props and tokens as structured data AI coding tools can query, so generated code matches the real API.
- [What is an MCP design system?](https://orvain.dev/learn/what-is-an-mcp-design-system): An MCP design system exposes its components, props and tokens through a Model Context Protocol server so Cursor, Claude Code and other AI tools can query them.
- [What is a React design system, and how do you choose one?](https://orvain.dev/learn/react-design-system): What a React design system contains, how to choose between copy-paste, packaged and headless options, and where Orvain UI fits.
- [What is a Vue design system, and how do you choose one?](https://orvain.dev/learn/vue-design-system): What a Vue design system is, what to look for in one, and how Orvain UI gives Vue the same tokens, blocks and Figma library as React.
- [What is a Figma UI kit, and how is it different from a design system?](https://orvain.dev/learn/figma-ui-kit): What a Figma UI kit is, how it differs from a design system, why Figma-to-code parity matters and what is in Orvain's Figma library.
- [Glossary](https://orvain.dev/glossary): short definitions of design system, design tokens, MCP, AI-native design system and related terms.

## Use cases

- [How does Orvain UI help product designers?](https://orvain.dev/use-cases/for-designers): A Figma library with components, variants and tokens that match the code, so what you design is what gets built.
- [How does Orvain UI help front-end developers?](https://orvain.dev/use-cases/for-developers): Accessible, themeable React and Vue components and blocks from one token layer, with code for both frameworks and a live playground.
- [How does Orvain UI help with AI and vibe coding?](https://orvain.dev/use-cases/for-ai-coding): Give Cursor, Claude Code, Windsurf and v0 your real components through an MCP server, so generated UI uses props that exist.
- [How does Orvain UI help SaaS teams?](https://orvain.dev/use-cases/for-saas-products): Tables, metrics, forms, sign-in and settings controls as ready blocks, themeable per brand, in React or Vue, with a Figma library to match.

## Comparisons

- [Compare design systems](https://orvain.dev/compare): Orvain UI against copy-paste, packaged, headless and Figma-first approaches.
- [Orvain UI vs shadcn/ui](https://orvain.dev/compare/orvain-vs-shadcn-ui): How Orvain UI and shadcn/ui differ on distribution, framework coverage, design-file parity and what an AI assistant can read.
- [Orvain UI vs Untitled UI](https://orvain.dev/compare/orvain-vs-untitled-ui): How Orvain UI and Untitled UI compare on Figma-to-code parity, framework coverage and what an AI coding assistant can read.

## Articles

- [Blog](https://orvain.dev/blogs): write-ups on the MCP server, the white-label token pipeline, bundle discipline and accessible components.

## API and machine-readable files

- [API reference](https://orvain.dev/docs/api): the Orvain UI website API: newsletter signup and Stripe checkout endpoints, their JSON error codes, and how to call them.
- [OpenAPI specification](https://orvain.dev/openapi.json): the same API as an OpenAPI 3.1 document, with an operationId, description and typed schemas on every operation.
- [API catalog](https://orvain.dev/.well-known/api-catalog): RFC 9727 linkset pointing at the OpenAPI document and the reference.
- [Home page as Markdown](https://orvain.dev/index.md): the home page in Markdown; the home page URL also returns it to requests sent with Accept: text/markdown.
- [Sitemap](https://orvain.dev/sitemap.xml): every public URL.

## Support

- [FAQ](https://orvain.dev/faqs): common questions about the library, service and support.
- [Contact](https://orvain.dev/contact): sales, support and partnerships.

## Optional

- [Privacy policy](https://orvain.dev/privacy)
- [Terms and conditions](https://orvain.dev/terms)
- [Cookie policy](https://orvain.dev/cookies)
- [Licence](https://orvain.dev/license)
- [Refund policy](https://orvain.dev/cancellation)