Tokens, components, Figma and clean React and Vue code, served to your AI through the Orvain MCP. Every screen it makes is 100% Orvain.
Order #3155115
Active
Destination
Oct 27, 6:30 pm
Picked up
Oct 27, 7:30 am
Arrived at pickup
Oct 27, 7:00 am
En route to pickup
Oct 27, 6:50 am
Order accepted
Oct 27, 6:30 am
Matt Gordon
On the way
97.4 mi
distance
1h 13m
time
$781
price
Driver checked in at the Medford stop. Dock 4 is ready for the drop, gate code shared.
4:30 pmThe 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
Orvain is built to close the gap between design Mayaand code < Button />. One system that gives your team +4Samand your agents the same components, the same tokens, #59EAA9and the same source of truth.
Orvain is built to close the gap between designFigma and code< Button />. One system that gives your team+4 and your agents< MCP the same components, the same tokens#59EAA9, and the same source of truth.
Most systems make you pick between serious engineering foundations and modern AI workflows. Orvain does both, in one library, behind one config file.
Most systems make you pick between serious engineering foundations and modern AI workflows. Orvain does both, in one library, behind one config file.
600+
strict-typed components
for React & Vue
11,000+
Figma variants, mirrored
1:1 with code
<12 kB
bundle, RSC-safe,
zero runtime CSS
600+
strict-typed components
for React & Vue
11,000+
Figma variants, mirrored
1:1 with code
<12 kB
bundle, RSC-safe,
zero runtime CSS
Real products shipped with our components, composed by hand or generated with AI. Same tokens, same library, infinite range.
Real products shipped with our components, composed by hand or generated with AI. Same tokens, same library, infinite range.
Most systems make you pick between serious engineering foundations and modern AI workflows. Orvain does both, in one library, behind one config file.
11,000+
variants ready to use now: every variant and state, mapped 1:1 to the code, nested instances included.
Every variant and state, mapped 1:1 to the code, nested instances included.
Engineers don't ship Figma. They ship code. So we built Orvain code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
export default function JobCard() {return (<Card.Root><Card.Header><Avatar src='/ethan.png' size='md' /><Card.Title>Ethan Cole</Card.Title><Card.Meta>Posted 4 minutes ago</Card.Meta></Card.Header><Tag.Group><Tag>Product design</Tag><Tag>Design systems</Tag><Tag>Figma</Tag><Tag>Remote</Tag></Tag.Group><Card.Heading>Senior product designer for a fintech app</Card.Heading><Card.Description>Redesign onboarding and payments with our team.</Card.Description><Card.Footer><Price value={95} unit='hr' /><Badge variant='neutral'>Hourly</Badge><Button variant='primary' size='lg'>Contact</Button></Card.Footer></Card.Root>);}
Ethan Cole
Posted 4 minutes ago
Senior product designer for a fintech app
Redesign onboarding and payments with our team. A three-month contract, fully remote, starting in October.
Engineers don't ship Figma. They ship code. So we built Orvain code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
export default function JobCard() {return (<Card.Root><Card.Header><Avatar src='/ethan.png' size='md' /><Card.Title>Ethan Cole</Card.Title><Card.Meta>Posted 4 minutes ago</Card.Meta></Card.Header><Tag.Group><Tag>Product design</Tag><Tag>Design systems</Tag><Tag>Figma</Tag><Tag>Remote</Tag></Tag.Group><Card.Heading>Senior product designer for a fintech app</Card.Heading><Card.Description>Redesign onboarding and payments with our team.</Card.Description><Card.Footer><Price value={95} unit='hr' /><Badge variant='neutral'>Hourly</Badge><Button variant='primary' size='lg'>Contact</Button></Card.Footer></Card.Root>);}
Ethan Cole
Posted 4 minutes ago
Senior product designer for a fintech app
Redesign onboarding and payments with our team. A three-month contract, fully remote, starting in October.
Build me a billing settings page with a plan summary, a monthly/yearly toggle, an auto-renew switch, and a “Cancel plan” confirm dialog.
Nothing invented. Every prop, variant and a11y contract came from the registry.
claude mcp add orvain mcp.orvain.devBuild me a billing settings page with a plan summary, a monthly/yearly toggle, an auto-renew switch, and a “Cancel plan” confirm dialog.
Nothing invented. Every prop, variant and a11y contract came from the registry.
claude mcp add orvain mcp.orvain.devWhole screens, not only parts: a date picker with its range and presets, a table with its sorting and empty state, an editor with its toolbar. Drop one in, theme it once, and a project starts assembled.
Whole screens, not only parts: a date picker with its range and presets, a table with its sorting and empty state, an editor with its toolbar. Drop one in, theme it once, and a project starts assembled.
Explore + 100 more blocksThree 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