Components

A component is a reusable, self-contained piece of UI — a hero, a pricing table, an FAQ accordion, a feature grid. Pages are built by composing components. SpiderPublish ships a library of polished components, and you can create your own.

How components work

Each component bundles its own markup, styling, and behavior, and declares the props (fields) it accepts. When you drop a component onto a page, you fill in those props and the component renders itself. Because each component's styling is isolated (using Shadow DOM), components never leak their styles into the rest of your page or fight with each other.

System and custom components

  • System components ship with the platform. Their slugs start with sys- (for example sys-hero-split, sys-pricing-table, sys-faq-accordion). They are ready to use on any site.

  • Custom components are ones you create for your own brand or layout needs.

Adding a component to a page

In the page editor, add a component block and pick a component from the gallery. Fill in its props. That is it — the component is now part of your page like any other block.

Versioning

Components are versioned. A page block can pin a specific version of a component, or follow the latest. This means a component can be improved over time without unexpectedly changing pages that depend on a known-good version.

Creating your own

You can author a component with its own template, styles, and prop schema, then publish it to make it available on your pages. Components move through draft → published, and can be archived when retired. Authoring is available in the dashboard and through the component MCP tools.

With the CLI or an agent

  • MCP / agents — browse the library with content_list_marketplace_components, insert a section into a page, and (for custom components) create, update, publish, and version components through the component tools.

Tips

  • Reach for the library first. The shipped components cover most marketing sections and are already accessible and responsive.

  • Turn repeated sections into components. If the same block appears on many pages, a component keeps them consistent and editable in one place.

  • Pin versions on important pages so a component update never surprises a high-traffic page.

Next steps

  • Browse ready-made section components in the Marketplace.

  • Render components in your own Templates with the {% component %} tag.

  • Assemble components into pages — see Pages.

  • Look up the component tools in the Design MCP Reference.