Components & tokens on the Doop canvas

Design it once.
Every frame follows.

Components and design tokens for the canvas you share with Claude Code, Codex and any MCP agent. Change one and every frame updates, then hand the system to React, shadcn/ui and Tailwind.

Build your system Read the docs

One main.
Every copy.

Select any block and make it a component. Props carry the text, photos and variants that change from copy to copy, and every instance on every frame follows the main.

  • Props, slots and variants, so a state is a setting, not another copy
  • Override one instance and it survives every change to the main
  • Publish a library and pull its updates on any canvas

Your whole library.
One tab away.

Every component on the canvas, with a live preview and its props. People drag one in; agents place it with a single <doop-use> line over MCP, so a design never drifts from the system.

Search components All 12InputsCardsNavigationFeedback Fjell DS v1.4 · published to the workspace Publish
ReserveSaveMessage host
Button
tone · size · icon
LakesideSnowSaunaDogs ok
Chip
label · selected
Lofoten · 12–15 Dec · 2 guests
SearchField
placeholder · scope
Nusfjord RorbuLofoten · Sleeps 2
€142 night
ListingCard
title · price · image · badge
10111213141516
DateRange
start · end · month
€184 × 3 nights€552
Cleaning€40
Total€592
PriceRow
label · amount · total
ExploreSavedTripsProfile
TabBar
active
4.96· 212 reviews
Rating
score · count
Hosted by IngridSuperhost
HostBadge
name · photo · superhost
Pets allowed
Toggle
label · on
Saved to Lofoten tripUndo
Toast
tone · action
Guests–2+
GuestStepper
min · max · value

Every value.
Named once.

Tokens hold the values your frames share. A gap is space-gap, not 16 typed forty times, so one change lands everywhere. Give a token a dark value and the same frame renders in both themes.

  • Gaps, padding and radii bind to tokens and show it on the canvas
  • Light and dark themes from one design, no second copy
  • Agents read your tokens before they write a single hex

Agents build with
your system.

Claude Code, Codex, Cursor and the Doop Agent read your components and tokens through the Doop MCP server. They place a ListingCard in one line instead of redrawing it, so what they make is on brand the first time.

From canvas
to React.

Handing the system to code takes one step. Tokens export as Tailwind, CSS or JSON. Components point at the React or shadcn/ui file that builds them, so Claude Code ships your real components, not a lookalike.

Tailwind CSSv4 @theme
@theme {
  --color-accent: #1f6b46;
  --color-surface: #f3f5f7;
  --radius-card: 14px;
  --spacing-gutter: 16px;
  --font-display: "Hanken Grotesk";
}
Every token, named in Tailwind’s namespaces. Also as CSS variables per theme, or JSON.
React + shadcn/uilinked to code
Button@/components/ui/button
Toggle@/components/ui/switch
ListingCardsrc/ui/listing-card.tsx
DateRangesrc/ui/date-range.tsx
Toast@/components/ui/sonner
Point a component at its file and export. Agents reach for <Button>, not a new div.
Claude Codevia Doop MCP
> Build Explore from the frame
  marked ready for dev

✓ get_frame · Explore
✓ get_tokens · tailwind
✓ <ListingCard price={184} />
✓ <Button>Reserve</Button>
Frames are real HTML and CSS, so nothing gets lost between the canvas and the codebase.

A real system.
Not a sticker sheet.

Everything you expect from components and tokens in a design tool, built so people and agents can use it the same way.

sizesmmdlgbadgeGuest favouritenone

Props and variants

Text, image and enum props on one main. A size or a state is a setting, not another component.

Cancel this booking?
slot: actionsKeep itCancel

Slots

Leave a hole in a component and fill it per instance: the actions of a dialog, the body of a card.

ReserveReserveBook tonight1 override

Overrides that stick

Change one instance and keep the change through every later edit to the main. No detaching.

Fjell DSv1.4 → v1.5ExploreCheckoutHost appPull update

Workspace libraries

Publish a library once and use it on every canvas in your workspace. Canvases pull updates when you say so.

Reserve
Reserve

Light and dark themes

Give a token a value per theme. One frame renders both, and you can flip between them on the canvas.

codesrc/ui/ListingCard.tsxexport ListingCard

Linked to your code

Point a component at its file and export, so the agent that builds the screen reaches for your real component.

Questions,
answered.

Components, tokens and MCP on Doop, and how it compares with Claude Design and Paper.

Is Doop an alternative to Claude Design?

Yes. Claude Design is Anthropic’s design tool inside claude.ai. Doop is an open-source, multiplayer design canvas that Claude Code, Codex, Cursor and any other MCP agent design on, next to your team. Components and tokens live on the canvas, so every agent and every person works from the same system, and you can self-host it.

How do components and tokens work with MCP?

The Doop MCP server gives agents the same library you see. They list your components, place one with a single <doop-use component="ListingCard"> line, and change every instance with update_component. Tokens come back from get_tokens, and agents write var(--name) instead of a raw hex.

Does Paper have components?

Not yet. As of November 2026, Paper’s public roadmap lists components with props and slots as coming soon, and themes and tokens as in progress. Doop ships both today, with props, slots, variants, overrides and themes, so it works as a Paper alternative if your team needs a design system now.

Can I export to React, shadcn/ui and Tailwind?

Yes. Tokens export as a Tailwind v4 @theme block, CSS variables per theme, or JSON. Each component can point at its React file and export, including shadcn/ui components, so a coding agent builds the screen with your real components. Every frame is plain HTML and CSS you can copy.

Do tokens support dark mode?

Give any token a value per theme, like light and dark. One frame renders in every theme, and you can switch between them on the canvas or from an agent.

Are components and tokens free?

Yes, in every plan, Free included. Doop is open source under AGPL-3.0, so you can also run it on your own servers.

Stop redrawing the button.
Make it a component.

Build your system