Types of Components

You define Components. Components are the data layer that connects with UI.

Custom Components are Blog Posts, Authors, addresses, custom raw data, etc.

UI Components are just Custom Components marked as UI Elements, footer, header, hero, etc.

System Components are predefined by the CMS as Country and Language.

What are UI Components?

Pages are composed of more than one UI Component

Examples:

• hero-block
• feature-block
• image-carousel
• header/footer

Each UI Component represents a section of your page.

UI Component Workflow

1. Define a component (structure of the block) in the component builder
2. Create the UI component
3. Assign the UI Component to a page
4. Render it on the client with appropriate block in the block registry and renderer setup

Example: Hero Block Schema

A hero block might contain:

• Image
• Heading
• Subtitle

Json Schema in the editor

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

Admin Panel Setup

• Create a new block
• Attach the schema (HeroSchema)
• Name the block (e.g., hero-block)

Assign Block to Page

• Go to a route in the admin panel
• Click Assign Page
• Add the newly created block

Rendering on Client

Once assigned, the block can be fetched and rendered on the client side using your renderer setup.

Summary

• Schemas define the structure of blocks
• Blocks define sections of a page
• Pages are composed of multiple blocks
• Fully customizable and reusable