Suncel home pageSuncel logoSuncel v1.1
  1. Register block

Blocks > Register block

Register a block

Once your block is created, you must register it to be accessible in the page builder.

To register it, add the component to your Block menu list.

Menu blocks is the list of all your Blocks. It is used to register your Blocks into Suncel for them to appear in the Page builder.

The blocks can be arranged in 3 levels:

  • Category

  • Blocks variants

  • Block

The name, description, and image of the block can be defined

Menu block


interface BlockVariant {
  image?: string | JSX.Element; // url of the image or a svg
  name: string; // The name of the component
  component: any; // The component to register
  description?: string; // The description of the component

interface BlockMenu {
  name: string;
  variants: BlockVariant[];

interface MenuBlockSchema {
  category: string;
  blocks: BlockMenu[];


import { MenuBlockSchema } from "@suncel/nextjs";

export const menuBlocks: MenuBlockSchema[] = [
    category: "Blocks",
    blocks: [
        name: "Hero",
        variants: [
            image: "",
            component: Hero,
            name: "Hero",
            description: "Hero description",

Register in the context

Once your menu block is defined, it needs to be added to the menuBlocks attribute of the SuncelContext.


// pages/_app.tsx file

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SuncelContext } from "@suncel/nextjs";
import { menuBlocks } from "@/suncel/menuBlocks";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SuncelContext menuBlocks={menuBlocks}>
      <Component {...pageProps} />

export default MyApp;