Component Library

Open Components in Project Explorer. Click + to create an Empty, Button, Panel, Text, or Image component.

Use a clear name such as PrimaryButton or InventorySlot. Component names start with a capital letter.

Project Explorer groups the project's components under headings such as BUTTONS and FEEDBACK, alongside the Views and Styles sections. Each heading is a physical folder under components/; click it to expand or collapse its contents, and click a component to open its source.

Place a component

Drag a component:

• into the source editor at the required position; or
• onto a container or named slot in Hierarchy.

Studio adds the component and its import automatically. A single click on a component in Project Explorer opens its source; a double-click shows that component by itself in Preview. Use drag and drop when you want to insert it.

Organize the list

Click the folder button beside Components to create a folder on disk under components/. Empty folders remain visible. Drag a component onto a folder heading to move its file there, or onto Components to move it to the root of that directory.

Studio updates component imports, relative paths inside the moved source, TypeScript imports, CSS resource paths, package and test entries, and component Preview slot references. Unopened source files are included. Unsaved editor changes remain unsaved, with their references updated too.

Use the folder's × button and confirm Remove folder, keep files to move its contents into the parent folder and remove the empty directory. This does not delete components. Use Undo to restore the folder and references, or Redo to repeat the operation.

Studio refuses existing destination names, including case-only collisions. External edits or invalid source syntax stop the operation; resolve the error and retry. Undo also checks that affected source text has not changed unexpectedly.

Previously created virtual folders remain available. They only group the list; dropping into them does not move files on disk. Their × button removes only the grouping. New component folders are physical folders.

Folders start collapsed. Click a folder heading to show or hide its contents. This applies to both component folders on disk and virtual folders.

Place a Lucide icon

Open Assets from the Activity Bar, choose Icons, and search the built-in Lucide catalog. The icon library stays in the Primary Sidebar, so Monaco and Preview remain available as drop targets. Drag an icon into Monaco, the preview canvas, or a static Hierarchy container, or double-click it to insert at the current source position. Studio writes an ordinary source element such as:

<Icon name="shield-check" size="24" />

The built-in Icon does not need an import. Set size, color, and stroke in source or use CSS color from its container. See Lucide icons.