Components

A component is something you build once and use many times. Change the main, and every instance follows, on every page, in every open editor and on your synced devices.

Make a component

1. Build it once, as ordinary layers.
2. Select it and press Ctrl+Alt+K. It becomes the main, in place: it stays where it is, and you keep editing it like any layer.
3. Drag it from the Assets panel (Alt+3) onto the canvas to place an instance. The Assets panel shows rendered previews, search and variant sets. Double-click an asset to go to its main.

An instance is one linked layer. What is inside it is computed from the main, not copied, so a change to the main reaches every instance at once.

Your agent does the same with component_create and instance_create, or with <x-instance component="Button" prop-label="Buy"> in the HTML it writes. Its guide tells it to check the components of a file before it builds anything that repeats, and design_lint points at structures it wrote twice.

Change one instance

Select a layer inside an instance and change it. That is an override, on this instance only:

• text, style, image source, and hiding a child, also inside nested instances;
• the inspector lists the overrides of an instance, and resets one or all of them;
• two people changing different fields of one instance merge;
• each change is one undo step.

You cannot add or reorder layers inside an instance, except in a slot. For that, change the main, add a prop or a slot, or detach the instance (Ctrl+Alt+B) to turn it into ordinary layers that no longer follow the main.

Overriding an image source has been tried through MCP only, not with the mouse.

Props

Props expose what varies, with controls in the inspector:

• text drives the words of a layer, such as a button label;
• boolean shows or hides a layer, such as an icon;
• image drives an image source.

A prop that is not set shows what the main shows, so editing the main keeps working.

Variants

Mains with the same set name are variants of one component, such as a Button with size: sm | lg and state: default | hover. On an instance, a variant is a control like a prop. Switching variants keeps your overrides on layers of the same name.

Slots

Mark a frame in the main as a slot. Each instance can then put its own layers in it: drop or paste them in, or let your agent pass children. Slots of nested instances can be reached by path through MCP only.

Shared libraries

A file, or a brand, can offer its components to other files:

1. In the file with the components, choose Publish in the Assets panel.
2. In another file, choose Link in the Assets panel and pick the library. Place its components like your own.
3. When the library publishes a change, linked files show a banner. Accept takes the update as one undo step, and your overrides stay.

A file keeps a copy of what it uses from a library, so its instances render where the library is missing: on another device, or after the library is gone. Pasting an instance into another file keeps the link. Copies stay through commits, restores and design folders.

Limits:

• Change library components in the library's own file. Neither you nor an agent edits the copies.
• A duplicated library file publishes under the same name as the original.
• Code components inside a library component are dropped.
• Token changes in a library are not offered as updates.

Agents use library_publish, library_link, library_updates and library_accept.

Code components from your repo

Place components from your own React project on the canvas, rendered by the project's own code and CSS:

1. Link the project folder in the Assets panel (or your agent calls code_project_link). The link is per device; Bogen keeps only an id in the file.
2. Bogen lists the project's React components, with props read from their TypeScript source: unions, booleans, defaults, cva variants and element props.
3. Place one. It renders in a sandboxed frame with no network and its own origin, with the project's Tailwind 4 CSS. Change its props in the inspector, or your agent uses code_component_update. It is measured to fit.
4. Screenshots and PNG exports show it. JSX and code_get write it as a usage with its import, such as <Button variant="ghost">Save</Button>.

Limits: React only, with Tailwind 4. Tailwind JS plugins and config files are skipped, and classes that appear only in prop values are not generated. HTML export keeps the frame's URL, and SVG export falls back to HTML for it. A checkout at another path on another device needs linking again. It has been tried with a Vite, React and Tailwind 4 project, not yet with a real shadcn repository.

Sizes and older devices

One main edit with 500 instances on a page updates them in tens of milliseconds. Nesting stops at 8 levels, and a component that contains itself stops there too.

A paired device that runs an older build keeps the component data, and shows an instance as an empty frame of its own. That follows from how the data is stored; it has not been tried with an older build.