Adding Components to Your Page

Framekit offers multiple ways to add content to your pages. Here's a complete guide to adding components.

The Add Block Menu

Opening the Menu

Click the "+" button in the editor

Or click between existing blocks where you want to add content

The component selector modal will appear

Available Options

#### Basic Blocks

Simple building blocks like:

• Text - Paragraphs, headings, lists
• Image - Photos and graphics
• Button - Call-to-action buttons
• Divider - Visual separators
• Spacer - Add vertical space

#### Pages

Pre-built page templates you can use as starting points:

• Landing pages
• About pages
• Contact pages
• Product pages

#### Components

Reusable components from:

• Library Components - Pre-built, professionally designed
• My Components - Components you've saved
• AI Components - Generate new components with AI

Adding from the Component Library

Browsing Components

Click "+" > Components

Browse by category or search

Click a component to preview

Click "Add" to insert it

Component Categories

• Hero sections
• Feature sections
• Testimonials
• Pricing tables
• Contact forms
• Footers
• And more...

Adding AI Components

Click "+" to open the component selector

Go to Basic Blocks tab

Select AI Component from the AI category

Describe what you want in the chat

AI generates a custom component

See Generating Components with AI for detailed guidance.

Adding Your Saved Components

If you've saved components before:

Click "+" > Components

Select "My Components" tab

Choose from your saved components

Click to add

Positioning Components

Adding Between Blocks

Click the "+" that appears when hovering between blocks to add content at that position.

Reordering

Drag and drop components to reorder them on your page.

Moving to Different Sections

Use the component menu to move blocks:

• Move to Hero section
• Move to Footer section
• Move up/down on the page