Relay owner's guide
Everything from the download to your own palette, read from the files this theme ships.
- 2.2.1
- version
- 6
- pages
- 29
- components
- 44 × 2 modes
- tokens
- 4
- workflows
unzip relay-2.2.1.zip
cd relay-2.2.1
bun install
bun devThe download is a complete Next.js project, not a folder of snippets. It carries 6 routes, the token file, 29 components and the agent kit.
See the priceInstall
Three ways in: the zip, the shadcn registry, or your agent over MCP.
The artifact is versioned and immutable, so the file you get is relay-2.2.1.zip. Unzip it, run the four commands above, and the site is on localhost:3000.
The link arrives with your license, and stays valid for every future version.
Every theme is a registry item the real shadcn CLI installs. Files land under src/tailthemes/relay/, mirroring the tree below.
bunx shadcn add https://tailthemes.com/r/relay.jsonRelay is paid, so the registry answers 402 with the price, the purchase URL and both token tables. Only the source files are withheld.
A registry item is JSON, so image assets cannot travel with it. Themes that import images need the zip as well.
Point any MCP client at https://tailthemes.com/api/mcp and your agent can read the manifest, both token tables and AGENTS.md before it touches a file.
the four toolsWhat unzips
One directory, laid out the way you would lay it out yourself.
every file
Three of these do the work: src/theme.css holds every design decision, AGENTS.md is the contract your agent reads first, and .claude/skills/ holds the 4 workflows it can run.
Screenshots are not in the download. They are generated by the publish pipeline and live on the listing, not in your project.
Using it
Every page is a plain component, and the tokens are scoped to one class.
- /Relay — the billing agent that hands off8 sections
- /productProduct — inside one agent run8 sections
- /securitySecurity — every scope, every record6 sections
- /pricingPricing — billed on tickets it closes6 sections
- /contactContact — who answers, and when4 sections
- /componentsThe parts — living styleguide20 sections
Tokens are declared on .tt-relay as well as :root, so an install cannot repaint components you already have. Wrap the page in <div className="tt-relay"> and everything inside picks them up.
Dark mode is a dark class on <html>. There is no second stylesheet and no dark: utility in the components.
Making it yours
Tokens are the API: change the values, never the names.
- Edit the values. All 44 tokens live in src/theme.css, in a light block and a dark one. Nothing in src/components/ carries a colour.
- Watch it land. Open /components. The styleguide reads every swatch, type step and radius live, so you see what the change did to the whole system at once.
- Re-check contrast. Run the check-quality workflow. The palette ships verified to WCAG AA in both modes and a rebrand should keep it there.
- .claude/skills/add-page
A Relay page is a plain exported component in src/app/ that stacks sections. No data fetching, no client state, no Next-specific APIs — the theme ships as source a buyer drops into their own router.
- .claude/skills/add-section
One section is one file in src/components/, self-contained, server-rendered. Follow the patterns already there rather than inventing new ones — the theme's value is that all seventeen sections look like one person made them.
- .claude/skills/check-quality
Ten checks. All of them are mechanical — none is "look at it and decide".
- .claude/skills/rebrand
Relay is a design system wearing a fictional billing agent. A rebrand swaps the name, the palette and the story.
Those summaries are the files' own opening lines. They are written against this repo, so where one names themes/relay/ your copy has the project root instead.
For your agent
The theme brought its own rules, so nothing has to be reverse-engineered.
AGENTS.md is 855 lines of invariants, the file map, the type and spacing scale, and what never to touch. It opens like this.
# AGENTS.md — Relay
Rules for any agent (or human) editing this theme. They are not style
suggestions; the publish gate and the extension skills in `.claude/skills/`
assume them.
## What Relay is
A landing page for an **AI agent product** that ships the agent UI with it. The
fictional product is an AI support agent for a subscription company's **billing
queue**: it reads Stripe, a read replica of the accounts table and the help
center, closes the routine tickets, and hands the rest to a named person with
the research attached.
The positioning line every piece of copy descends from:
> For support leads at subscription SaaS who cannot let an AI near billing,
> Relay closes the routine billing tickets from live Stripe and account data and
> hands the rest to a human with the research already attached.
## The signature — **one ticket, told four ways**
Ticket `ZD-4821` arrives as a live card in the hero, replays as a full
transcript, replays again as a timed rail, and replays a third time as a forked
decision graph. Home carries a fourth trace in `outcome-band`: the run's own
numbers, in the ops-sheet voice. The same eight facts, four registers, three
routes.
It is structural, it survives a rebrand, it survives a palette change, and it is
the actual reason to buy Relay over any other agent-landing template. Two
conditions keep it honest, and both are load-bearing:
1. **The four tellings must agree.** They are reconciled by the spine table in
`.claude/skills/check-quality/`, not by hope. Changing a number in one place
means changing it in every place that table lists.The kit is plain markdown, so the work continues on your machine and your own account. Nothing calls back here.