Tokens, components, Figma and clean React and Vue code, served to your AI through the Orvain MCP. Every screen it makes is 100% Orvain.
Build Relay's dispatch console: the live Amsterdam map, couriers on the road, deliveries per hour and who's running late
The metric card your designer drops in from Figma, the one you import from npm and the one your AI builds through the MCP are the same component, made of the same tokens. Nothing is redrawn or reinterpreted along the way.
Weekly goal
Weekly goalWeek 43 · Analytics
42m+18%7 days0of 12,000 sessions
Layers
Weekly goal
Header
Progress
Dial
Weekly goalMain component
Layout
Variables
Your team +4Samand your agents build from one system: the same components Buttonthe same tokens #59EAA9and the same layout rules, from Figma Gap 6Gap 12Mayato production UI.
Your team and your agents build from one system: the same components the same tokens and the same layout rules, from Figma to production UI.
Claude Code, Cursor or any MCP client asks Orvain for the real components, tokens and layout rules, then hands you typed code that already passed the checks.
The agent asks the Orvain MCP for blocks and component specs, not a guess. Real props, every state, accessibility included.
Colours, radius and type come from your theme, through tokens. No hard-coded values, so every card stays in step.
Screen recipes and layout rules decide the grid, the order and the spacing, the way your design team would.
Six products, every screen built through the Orvain MCP with only our components, our layout rules and our tokens. Pick one, then open any of its pages.
One Figma file and one codebase, mirrored part for part, and an MCP that hands all of it to your agent.
Three steps from install to shipped page: add the system, connect the agent you already use, then compose screens from blocks without leaving your editor.
A system built for the way you ship today.
and your React or Vue project is set up for Orvain components
Three steps from install to shipped page: add the system, connect the agent you already use, then compose screens from blocks without leaving your editor.
Install the system
A system built for the way you ship today.
and your React or Vue project is set up for Orvain components
Connect your agent
Wire Orvain into the agent you already use.
with your licence key, and Claude, Cursor or Copilot can read every component and token
Ship the page
Compose blocks without leaving your editor.
and ship a production-ready page on your next commit
Why pick Orvain over shadcn or Radix?
Both are great. Shadcn is a copy-paste recipe where you own every line, and Radix gives you unstyled primitives. Orvain is an opinionated library: a single import, white-label tokens, real bundle discipline, and the only one shipping a first-class MCP server. If you want a kit that’s engineered rather than assembled, that’s us.
What is an MCP server, exactly?
Model Context Protocol is an open standard that lets AI tools call structured “tools” over a connection. Our hosted endpoint exposes your component library, its props, tokens and patterns, so any MCP-aware assistant can query the real source instead of guessing from training data.
Which AI tools are supported?
Anything that speaks MCP today: Cursor, Claude Code, Windsurf, and a growing list, plus drop-in adapters for v0 and GitHub Copilot. Connecting is a single config entry pointing at mcp.orvain.dev.
How do you guarantee “0 hallucinated props”?
Every generation is validated against the live component schemas. Props that don’t exist, missing required variants, and invented imports are rejected before code is written, and the agent corrects itself against the real API.
Does this work with my own theme?
Yes. White-label tokens resolve from one config file. Re-theme once and every generation after that follows your brand automatically: colors, radii, spacing, type.
Will it bloat my bundle?
No. Components are tree-shakeable, RSC-safe and strictly typed, and the core ships under 12 kB gzipped. You import what you use and nothing else tags along.
Why pick Orvain over shadcn or Radix?
Both are great. Shadcn is a copy-paste recipe where you own every line, and Radix gives you unstyled primitives. Orvain is an opinionated library: a single import, white-label tokens, real bundle discipline, and the only one shipping a first-class MCP server. If you want a kit that’s engineered rather than assembled, that’s us.
What is an MCP server, exactly?
Model Context Protocol is an open standard that lets AI tools call structured “tools” over a connection. Our hosted endpoint exposes your component library, its props, tokens and patterns, so any MCP-aware assistant can query the real source instead of guessing from training data.
Which AI tools are supported?
Anything that speaks MCP today: Cursor, Claude Code, Windsurf, and a growing list, plus drop-in adapters for v0 and GitHub Copilot. Connecting is a single config entry pointing at mcp.orvain.dev.
How do you guarantee “0 hallucinated props”?
Every generation is validated against the live component schemas. Props that don’t exist, missing required variants, and invented imports are rejected before code is written, and the agent corrects itself against the real API.
Does this work with my own theme?
Yes. White-label tokens resolve from one config file. Re-theme once and every generation after that follows your brand automatically: colors, radii, spacing, type.
Will it bloat my bundle?
No. Components are tree-shakeable, RSC-safe and strictly typed, and the core ships under 12 kB gzipped. You import what you use and nothing else tags along.
The MCP server is the killer feature. Cursor finally suggests our real props instead of inventing ones.
“The MCP server is the killer feature. Cursor finally suggests our real props instead of inventing ones.”
“We shipped our dashboard in a weekend. Same tokens in Figma and code meant zero hand-off friction. The design just became the app.”
“Strict types, RSC-safe, under 12 kB. It's the first component library I haven't had to fight with.”
“Re-themed the whole product to a client's brand by editing one config. Everything followed, Figma and code together.”
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCP