Introduction

Odyssey UI is a code-first component system for React and Vue, with a matching Figma library and design tokens that both sides share. The free set is documented here and stays free; the full code library and the MCP server are what we're building now.

Overview

Odyssey gives design and engineering one source of truth. Components are written as strict, tree-shakeable, server-component-safe code; the Figma library mirrors the same props and tokens, so a handoff is a link rather than a translation.

Whatever you build stays consistent across projects, because the tokens underneath it are the same ones the design file uses.

Why Odyssey

Engineered, not assembled. A single import with real bundle discipline — the core is built to stay under 12 kB gzipped, tree-shakeable and safe in server components.

White-label by default. Retheme from one token file and every component follows: colour, radii, spacing and type.

Built for the way you actually work. The same component surface is readable by your editor and your agent, so generated code uses real props instead of plausible ones.

What's free

45 components across 7 categories — Actions, Displaying Data, Feedback, Form, Layout, Navigation, Overlays — are free, and stay free. No account, no licence key.

Editor and MCP

Odyssey is built to be read by the tools you already have open. The MCP server exposes the same component surface the library ships — real props, real variants, real accessibility contracts — so an agent composing a screen is working from the registry rather than from memory.

The server isn't live yet, so there is nothing to point your editor at today. It arrives with the code library.

What's coming

The code library and the MCP server are in progress. Component pages, the token reference and the CLI arrive with them.