Twenty-four React components. White-label tokens. A hosted MCP server so Cursor, Claude Code, and v0 build against the real API instead of a hallucinated one.
File Summary
0 KB/12.8 MB
12.8 MB·XLS
Payout Threshold
Set the minimum balance required before a payout is triggered.
Twenty-four React components. White-label tokens. A hosted MCP server so Cursor, Claude Code, and v0 build against the real API instead of a hallucinated one.
File Summary
0 KB/12.8 MB
12.8 MB·XLS
Payout Threshold
Set the minimum balance required before a payout is triggered.
Odyssey 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.
Odyssey is built to close the gap between designFigmaand code< Button />. One system that gives your team+4and your agents< MCPthe 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. Odyssey does both, in one library, behind one config file.
Most systems make you pick between serious engineering foundations and modern AI workflows. Odyssey does both, in one library, behind one config file.
strict-typed components
for React & Vue
+
Figma variants, mirrored
1:1 with code
< kB
bundle, RSC-safe,
zero runtime CSS
24
strict-typed components
for React & Vue
+8,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. Odyssey does both, in one library, behind one config file.
+8,000
components ready to use now: every variant and state, mapped 1:1 to the code, nested instances included.
ECMPNRKALH+9+8,000
components ready to use now: every variant and state, mapped 1:1 to the code, nested instances included.
ECMPNRKALH+9Engineers don't ship Figma. They ship code. So we built Odyssey 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 ResetPassword() {return (<>{/* ... */}<Input.Root className=''><Input.Wrapper><Input.Icon as={RiMailLine} /><Input.Input type='email' placeholder='hello@alignui.com' /></Input.Wrapper></Input.Root>{/* ... */}<FancyButton.RootclassName=''variant='primary'>Reset Password</FancyButton.Root>{/* ... */}</>);}
Ethan Cole
Posted 4 minutes ago
Looking for a creative UIUX designer to build our app
Lorem ipsum dolor sit amet consectetur. Lacus a massa nec diam amet elit maecenas rutrum.
Engineers don't ship Figma. They ship code. So we built Odyssey 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 ResetPassword() {return (<>{/* ... */}<Input.Root className=''><Input.Wrapper><Input.Icon as={RiMailLine} /><Input.Input type='email' placeholder='hello@alignui.com' /></Input.Wrapper></Input.Root>{/* ... */}<FancyButton.RootclassName=''variant='primary'>Reset Password</FancyButton.Root>{/* ... */}</>);}
Ethan Cole
Posted 4 minutes ago
Looking for a creative UIUX designer to build our app
Lorem ipsum dolor sit amet consectetur. Lacus a massa nec diam amet elit maecenas rutrum.
Works with Claude Code142 components indexedBuild 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.
MCP server — nextWorks with Claude Code142 components indexedBuild 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.
MCP server — nextEngineers don't ship Figma. They ship code. So we built Odyssey code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
Engineers don't ship Figma. They ship code. So we built Odyssey code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
Explore + 100 more blocksLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Engineers don't ship Figma. They ship code. So we built Odyssey code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
A system built for the way you ship today.
One command will pull components, tokens and the Figma kit into your project for React.
Engineers don't ship Figma. They ship code. So we built Odyssey code-first: strict types, RSC-safe, under 12 kB. The Figma kit mirrors the same props and tokens, so designers hand off without translation.
Install the system
A system built for the way you ship today.
One command will pull components, tokens and the Figma kit into your project for React.
Connect your agent
Wire Odyssey into the agent you already use.
Claude, Cursor and Copilot will read every component and token straight from the registry.
Ship the page
Compose blocks without leaving your editor.
Add a block by name and ship a production-ready page on your next commit.
Why pick Odyssey over shadcn or Radix?
Both are great. Shadcn is a copy-paste recipe where you own every line, and Radix gives you unstyled primitives. Odyssey 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?
Which AI tools are supported?
How do you guarantee “0 hallucinated props”?
Does this work with my own theme?
Will it bloat my bundle?
Why pick Odyssey over shadcn or Radix?
Both are great. Shadcn is a copy-paste recipe where you own every line, and Radix gives you unstyled primitives. Odyssey 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?
Which AI tools are supported?
How do you guarantee “0 hallucinated props”?
Does this work with my own theme?
Will it bloat my bundle?
We shipped our dashboard in a weekend. Same tokens in Figma and code meant zero hand-off friction. The design just became the app.
“We shipped our dashboard in a weekend. Same tokens in Figma and code meant zero hand-off friction. The design just became the app.”
Daniel Mensah“The MCP server is the killer feature. Cursor finally suggests our real props instead of inventing ones.”
Priya Nair“Strict types, RSC-safe, under 12 kB. It's the first component library I haven't had to fight with.”
Tom Becker“Re-themed the whole product to a client's brand by editing one config. Everything followed, Figma and code together.”
Sofia AlmeidaJoin the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.