Skip to main content
The Component Library is your personal collection of reusable blocks. Once you create a block, it’s saved to your library and available across all your sites. This guide covers managing your library, reusing blocks, and exploring the marketplace.

​
What is the Component Library?

The Component Library stores all the blocks you create:
  • Blocks you build - Your custom components
  • Available everywhere - Use blocks in any site
  • Version controlled - Track changes and updates
  • Shareable - Export and import blocks
Blocks in your library are independent of sites. Create a block once, use it in multiple sites, update it everywhere at once.

​
Managing Your Library

​
Viewing Your Blocks

1

Open the Component Library

Click “Component Library” in the sidebar of any site.
2

Browse your blocks

You’ll see all blocks you’ve created, organized by:
  • Recently used - Blocks you’ve used recently
  • All blocks - Complete list of your blocks
  • Categories - If you’ve organized them
Use the search bar to quickly find blocks by name or description.

​
Creating New Blocks

1

Create a new block

Click “Create Block” in the Component Library.
2

Write your component

Use the in-browser editor to write your component code.
The editor provides syntax highlighting, auto-completion, and instant preview.
3

Add fields

Attach content fields to make the block editable.
See the Working with Fields guide for details.
4

Save to library

Click “Save Block” and give it a name. The block is now in your library.

​
Editing Existing Blocks

1

Find the block

Browse or search for the block you want to edit.
2

Open the block

Click on the block to open it in the editor.
3

Make changes

Update the component code, fields, or settings as needed.
4

Save changes

Click “Save” to update the block.
Changes to blocks affect all sites using that block. Test changes carefully.

​
Organizing Blocks

Keep your library organized:
1

Use descriptive names

Name blocks clearly:
  • ✅ “Hero Block”
  • ✅ “Text with Image”
  • ✅ “Card Grid”
  • ❌ “Block 1”
  • ❌ “Test”
2

Add descriptions

Include descriptions that explain what each block does:
3

Use categories (if available)

Group related blocks:
  • Content: Text, Image, Video
  • Layout: Grid, Columns, Container
  • Interactive: Form, Button, CTA
  • Specialized: Testimonials, Pricing, FAQ

​
Reusing Blocks Across Sites

​
Adding Blocks to a Site

Once a block is in your library, use it in any site:
1

Open page type editor

Go to Page Types and edit the page type where you want to use the block.
2

Add available blocks

In the “Available Blocks” section, click “Add Block” and select from your library.
3

Blocks are now available

Editors can now use these blocks when creating pages of this type.
Blocks in your library are available to all your sites. Create once, use everywhere.

​
Updating Blocks Globally

When you update a block in your library:
1

Edit the block

Make your changes in the Component Library.
2

Save changes

Click “Save” to update the block.
3

Changes apply everywhere

All sites using that block get the update automatically.
Test updates carefully. Breaking changes affect all sites using the block.

​
Block Versions

Primo tracks block versions:
  • View history - See previous versions of a block
  • Revert changes - Go back to an earlier version if needed
  • Compare versions - See what changed between versions
Use version history to safely experiment with block changes. You can always revert if something breaks.

​
Building a Server Library

​
Start with Essentials

Build a core set of blocks:
  1. Hero - Landing page hero sections
  2. Text - Rich text content
  3. Image - Image with optional caption
  4. Card Grid - Flexible grid layouts
  5. Call-to-Action - CTA sections
  6. Footer - Site footer

​
Expand Gradually

Add blocks as you need them:
  • Content blocks - Text, Image, Video, Code
  • Layout blocks - Grid, Columns, Container, Spacer
  • Interactive blocks - Form, Button, CTA, Modal
  • Specialized blocks - Testimonials, Pricing Table, FAQ, Team

​
Refine and Improve

Continuously improve your blocks:
  • Add features - New fields, variants, options
  • Improve styling - Better responsive design, animations
  • Fix bugs - Address issues as you find them
  • Optimize - Better performance, smaller code
Your library grows with every project. Blocks you build for one site become reusable assets for future projects.

​
Block Patterns

​
Simple Content Blocks

Basic blocks for common content: Text Block:
  • Rich text content
  • Alignment options
  • Background color
Image Block:
  • Image upload
  • Alt text
  • Caption
  • Full-width option
Video Block:
  • Video upload or embed
  • Autoplay options
  • Caption

​
Layout Blocks

Blocks for organizing content: Card Grid:
  • Repeater for cards
  • Configurable columns
  • Responsive layout
Columns:
  • 2, 3, or 4 column layouts
  • Equal or custom widths
  • Responsive stacking
Container:
  • Max-width container
  • Padding options
  • Background styling

​
Interactive Blocks

Blocks with user interaction: Call-to-Action:
  • Headline and description
  • CTA button
  • Background styling
Form:
  • Form fields (repeater)
  • Submit action
  • Success message
Modal:
  • Trigger button
  • Modal content
  • Close options

​
Sharing Blocks

​
Exporting Blocks

Export blocks to share or backup:
1

Select a block

Open the block you want to export.
2

Export

Click “Export” to download the block as a file.
3

Share or backup

Share the file with others or keep it as a backup.

​
Importing Blocks

Import blocks from others:
1

Open import

Click “Import Block” in the Component Library.
2

Select file

Choose the block file to import.
3

Review and import

Review the block code and fields, then import.
Only import blocks from trusted sources. Review the code before importing to ensure it’s safe.

​
Marketplace (Future Feature)

Primo will include a marketplace for:
  • Starter sites - Complete site templates
  • Block packs - Collections of related blocks
  • Individual blocks - Single blocks from the community
  • Themes - Design system templates
The marketplace will let you discover blocks built by the community and share your own creations.

​
Best Practices

​
1. Build Reusable Blocks

Design blocks to work in multiple contexts by choosing field names carefully:
Use generic field names like headline, content, image instead of context-specific names like homepage_headline or about_page_content.

​
2. Document Your Blocks

Add clear descriptions:
Hero Block A flexible hero section with headline, subheadline, CTA, and optional background image. Supports multiple variants (default, large, minimal) and works on any page type.

​
3. Version Carefully

Test updates before saving:
  1. Make changes in the editor
  2. Test with preview
  3. Check on multiple sites if possible
  4. Save when confident

​
4. Organize Early

Start organizing from the beginning:
  • Use clear naming conventions
  • Add descriptions immediately
  • Group related blocks
  • Keep a consistent structure

​
5. Reuse and Refine

Don’t recreate blocks:
  • Check your library first
  • Adapt existing blocks when possible
  • Improve blocks over time
  • Remove unused blocks

​
Common Workflows

​
Creating a New Site

1

Check your library

Review existing blocks before creating new ones.
2

Reuse what you can

Add existing blocks to your new site’s page types.
3

Create only what's needed

Build new blocks only for site-specific needs.

​
Updating a Block

1

Identify the block

Find the block in your library.
2

Review usage

Check which sites use this block.
3

Test changes

Make changes and test thoroughly.
4

Save and verify

Save changes and verify they work on all sites.

​
Next Steps

Writing Components

Learn how to build effective reusable components.

Working with Fields

Add fields to make blocks editable.

Your First Site

See how to build a library of blocks for a complete site.

Defining Page Types

Use library blocks in your page types.
Your Component Library is an investment. Every block you create saves time on future projects. Build thoughtfully, and your library becomes a valuable asset.