---
title: "Place components from your codebase"
description: "Drag a real component from the Components tab onto the canvas and switch its variant in the design panel."
url: https://help.modeinspect.com/en/articles/34-place-components-from-your-codebase
collection: "Canvas"
updated: 2026-11-02
language: en
---

# Place components from your codebase

Drag a real component from the Components tab onto the canvas and switch its variant in the design panel.

Place one of your codebase's components on the canvas as an instance, with its real styles, and switch its variant from the design panel. Use it when a design should carry the product's own button or card rather than a redrawn copy.

**Before you start**

-   A canvas of a codebase whose setup detected a design system. The codebase page shows **Design System** with a badge when it did.
    

## Steps

1.  Click the **Components** tab in the left rail. The panel lists one tile per component, sorted by name, each showing its default variant. Type part of a name in **Search components…** to narrow the list.
    
    ![The Components tab of the demo canvas with the search box and tiles for Accordion, Alert, Avatar, Badge, Button, Card and more](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/OL5abmhfD7IYwZjHygiS1pcbI0F5f4hVFUe6Y9cHTrhLwHfDUR9KwsAm6pmgbfRRIHySt9Mx7Qq.png)
2.  Drag a tile onto the canvas and release. The instance lands where you drop it. Releasing over the panel cancels the drop.
    
3.  With the instance selected, open **Component States** at the top of the design panel and choose a variant. Props with a fixed set of values show as a menu, on and off props as a switch.
    
    ![A Button instance placed on the canvas, with Component States in the design panel showing the variant and size menus](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/a7ezuWzH4mnwC3XMa9F0TczmdRksj3r49AVOgQvOSPjrYKp9CDnhH2fHkTDn0qTjTttNv1lTUl6.png)

The instance stays linked to its component, and the panel header names it, for example **Button (instance)**. The small arrow next to that name offers **Swap instance** to replace it with another component and **Detach instance** to turn it into plain layers. The agent treats a placed instance as that component when it builds, and when it designs on this canvas it reaches for your components before drawing its own.

In Build Mode, the same props appear in the design panel as Component states.

## If it does not work

-   **No components detected in the codebase.**: setup found no component library in this codebase, so there is nothing to place. Check the codebase page for the **Design System** badge.
    
-   **Loading components from codebase…** does not go away: setup is still reading the codebase. Come back when the codebase page shows it finished.
    
-   **No components match “…”**: clear **Search components…**. The search matches the component's name only.
    

## Related

-   [Use your design tokens on the canvas](https://help.modeinspect.com/en/articles/36-design-tokens.md)
    
-   [Work with layers](https://help.modeinspect.com/en/articles/39-layers.md)
    
-   [Write design guidelines for the agent](https://help.modeinspect.com/en/articles/18-write-design-guidelines.md)

## Related

- [Create a canvas](https://help.modeinspect.com/en/articles/35-create-a-canvas.md)
- [Rename, duplicate and delete canvases](https://help.modeinspect.com/en/articles/40-rename-duplicate-and-delete-canvases.md)
- [Duplicate a canvas](https://help.modeinspect.com/en/articles/37-duplicate-a-canvas.md)
- [Start a canvas from a branch or pull request](https://help.modeinspect.com/en/articles/38-start-a-canvas-from-a-branch-or-pull-request.md)
- [Canvas controls and keyboard shortcuts](https://help.modeinspect.com/en/articles/32-canvas-controls-and-keyboard-shortcuts.md)