Odyssey UIOdyssey UI

Snippet code

Code window

Best for

Docs and changelogs on a light page — the snippet sits on its own inset panel

Anatomy

Window chrome with the filename and a Copy that really copies · inset panel on a 32px card · line numbers · the file's own highlight palette

Counter.tsx

Flush code

Best for

Dense docs — the same window with the code running edge to edge

Anatomy

Taller chrome on a 20px card · panel flush to the edge · line numbers · click a line to hold it lit

Counter.tsx

Dark window

Best for

Landing pages and dark docs — the snippet reads as an editor

Anatomy

Same chrome inverted · inset panel on the dark card · outlined Copy · the palette's plain ink goes light

Counter.tsx

Dark flush

Best for

Terminal-style blocks — dark, edge to edge, nothing between the code and the card

Anatomy

Taller chrome on a 20px dark card · panel flush · outlined Copy · sideways scroll once a line outruns the stage

Counter.tsx
The Odyssey Dispatch

Be first in, and 10% off.

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.