Component Library

The Component Library provides pre-built sections you can add to your pages. Browse by category, preview them in different colors and screen sizes, and add several at once or build a whole page from them. In the editor's menus it's called Section Library.

Opening the Component Library

Open Site ▾ › Section Library (in the Design column), or press ⌘K (Ctrl+K) and type "Section Library". The library opens as a dialog. Browse page templates in the Create Page dialog opens it on the Templates tab.

Layout Overview

The library has two tabs:

Browsing Sections

In the Sections tab, you'll see:

• Left sidebar - Categories, search and tags
• Middle - The list of sections
• Right - Live preview

Categories

Sections are grouped by what they're for:

Search and filters

• Search sections... finds sections by name, description or tags.
• Tags narrow the list further.
• The Image filter shows only sections with imagery.
• Clear filters resets them.

Previewing Sections

Click any section to see it in the preview panel.

• Preview / Code switches between the rendered section and its Astro code
• Desktop, Tablet and Mobile set the preview width
• Color dots preview the section with different brand colors (Blue, Indigo, Violet, Purple, Fuchsia, Rose, Red, Orange, Amber, Emerald, Teal, Cyan, Slate)
• Copy Code copies the section's code to the clipboard

Adding Sections

One section

1. Open the page you want to add to
2. Click a section to preview it
3. Click Add to followed by the page's file name, for example Add to index.astro

With no page open, the button reads Insert Component and asks you to open a page first.

Replacing the site header or footer

Navigation and footer sections also offer Replace site header or Replace site footer. This overwrites src/components/Header.astro or src/components/Footer.astro, which every page uses, so it asks first. The new header or footer takes its links from the Menu Builder; any other custom code in the old one is lost.

Several sections

1. Click the checkbox on each section you want (Add to selection). Use the button at the top of a filtered list to add every section in it.
2. A bar shows how many sections are selected. Clear empties the selection.
3. Switch the preview between Section (the current section only) and Page (all selected sections stacked together) to see how they flow.
4. Then either:
   • type a name under new page name and click Create page to make a new page from them, or
   • click Add to followed by the open page's file name to add them to that page.

Sections are added in the order you selected them.

Templates

The Templates tab lists ready-made pages, such as a landing page, an about page, services, pricing, contact and FAQ. Clicking a template pre-selects its sections and takes you to the Sections tab, where you can review them, add or remove sections, and insert them all at once or create a page from them.

What Gets Inserted

Sections use Tailwind CSS classes and your design tokens, so they pick up the colors and fonts you set in Site Style. Contact sections send their forms wherever Forms settings point.

Customizing Sections

After inserting, customize sections in the Builder or the code:

1. Editing text - Double-click text in the preview to change it
2. Swapping images - Replace placeholder images from the Media Manager
3. Adjusting colors - Change classes in the Style tab, or the whole palette in Site Style
4. Adding/removing items - Duplicate or delete feature cards, testimonials and so on in the Builder

Using the AI Assistant

Ask the AI Assistant to customize sections:

• "Change the background to a gradient"
• "Add a fourth pricing tier"
• "Make this section full-width"

Tips

Start with a template

For new pages, start from a template to get a complete structure, then customize.

Preview with your brand color

Pick the color dot closest to your brand; it helps you picture the final result.

Check mobile

Use the Mobile preview width before inserting, and the preview's Mobile size afterwards.

Troubleshooting

Sections not loading

1. Check your internet connection
2. Refresh the page
3. Close and reopen the library

Adding doesn't work

1. Make sure a page is open (the button names it: Add to index.astro)
2. The open file must be a page in src/pages/

Preview blank

1. Wait for the preview to load (it can take a moment)
2. Try a different color dot
3. Switch between Preview and Code

Next Steps

• Design mode - Edit inserted sections visually
• AI Assistant - Get help customizing sections
• Media Manager - Replace placeholder images