Components

The Components panel (⇧A) lists every component file in the project, grouped by the folder it lives in. Components at the root of src/components come first, ungrouped; a subfolder becomes a heading, and layouts group under layouts.

Getting one onto the page

• Drag it into the Navigator and drop it where it belongs. The panel switches to the Navigator as the drag begins.
• Double-click it to append it to the page.
• Or forget the panel and press ⌘E: the insert palette searches the same list.

Reading the list

Each row shows the component’s name, split into words for legibility (ButtonArrow reads as “Button Arrow”), and how many instances of it the project currently has.

Hovering a row for a moment renders that component on its own in a small preview, so you can tell two similarly named components apart without inserting either.

What counts as a component

Any .astro file under src/components or src/layouts. There is no registration step and no manifest: add a file, and it is in the palette.

Astro’s own <Image> and <Picture> from astro:assets are in the insert palette too. They insert like a component, with the import written for you, but they come from Astro rather than from a file in your project. If your project has its own component called Image, yours is listed first and is never shadowed.

Editing a component

Open a component to edit its own file: double-click its instance on the canvas, or use the arrow on its Navigator row. The canvas keeps showing the whole page, with everything outside that component dimmed, so you are editing the component in the context it is used in. Esc steps back out.