WeboraWWebora

See what the agent is touching

While an agent works, the element it's writing to gets an outline on your canvas — you know what moved and why, as it happens.

Also

  • All six Base UI kits refreshed to the current upstream, with cn() behaving exactly as in your repo.

  • Faster, clearer loading state when a project opens.

  • Toolchain and Base UI runtime upgraded.

Still invite-only.

Named styles, token renames, repeaters, thumbnails

Named styles

Assign a style to an element → it's a className token backed by a @utility block in your CSS. Reassign or remove it the same way.

Tokens that travel

Rename a variable under Variables and every reference in every source file updates. Delete one and its references are cleaned up. Spacing writes on your scale (p-4, not p-[16px]).

Repeaters

A list rendered from an array now edits as rows on the canvas: select the item template, restyle it, every row follows.

Icons

Swap any icon in place from the right panel.

Projects

The project list shows a live thumbnail of each canvas. Creating a project is faster; it initializes in the background.

Agents

  • write_source is now the one write tool (with insert).

  • Undo is scoped to each agent's own edits.

  • Agent presence is published to everyone in the project.

Also

  • New landing page.

  • Each new shadcn/ui project ships a showcase page built from real components — including a working Recharts chart.

Breakpoints, states, and the code tab

Read the code

New Code tab in the inspector. Select anything on the canvas and see the file it lives in, formatted, scrolled to that element.

Breakpoints are frames

Put the same page at 390 and 1280. Edit the wide one — spacing, layout, size — and Webora writes xl: classes. Rename a breakpoint in settings and every class using it is rewritten.

States

Hover, focus, active, dark mode, reduced motion — pick one in the States section, style it, and it lands as hover:, dark:, motion-reduce:. A light/dark override on a single element is saved too.

Insert

The Insert panel places real Base UI components and adds the import.

Agents write source

MCP gets list_source_files, get_source, search_source, write_source, get_source_diagnostics. A write that breaks the render is rolled back and the agent gets the error, not you.

Every variant on one canvas

Open Button and you get the matrix: every variant and every size, plus hover, focus, and disabled states as rows. Click the destructive + hover cell, change the background — that goes into that variant's classes in the cva definition. Nothing else moves.

Components made of parts (Dialog trigger, content, overlay) are editable per part.

Edit the component, or edit just this one

Props, visually

Select a Button. variant, size, and any other prop it declares show in the right panel. Switch default → outline on one instance; the others stay.

Edit scope

New switch at the top of the Style panel:

  • Definition changes the component source, so every instance follows.

  • Instance adds a class to just the element you selected.

No detached copies, no overrides layer — it's the same two things you'd do in code.

Webora private alpha is open

Webora is a design tool where the file is the design. Drag a padding handle, the className changes. Nothing to export, nothing to hand off.

Start from a kit you already know

New project → pick shadcn/ui, one of six Base UI styles (Vega, Nova, Maia, Lyra, Mira, Luma), or plain Tailwind v4 tokens. Have a code from shadcn Create? Paste it — same fonts, icons, and colors land in the project.

Bring your agent

Cursor, Claude Code, or any MCP client connects to the open project. It reads the tree, takes screenshots, writes tokens (DTCG in and out). Several agents at once — each shows up on the canvas.

Also

  • Right-click menu on the canvas.

  • Feedback button in the sidebar — it opens this board.

Not yet

  • No importing an existing repo.

  • Chrome on desktop only.

  • Access is invite-only — request an invite.