Adding to TinaCMS collection

Where to go next after you downloaded the component from Tina registry.

Prerequisites

Clone the starter template from Getting Started section.

Steps

  1. Add <YourComponent /> to template section inside tina/collection/page.ts folder.
tina/collection/page.ts
const Page: Collection = {

  //...

  fields: [
    {
      type: "object",
      list: true,
      name: "blocks",
      label: "Sections",
      ui: {
        visualSelector: true,
      },
      templates: [yourComponentSchema],
    },
  ],
};
  1. To make it render, you need to add the component to the switch case inside components/blocks/index.tsx file.
components/blocks/index.tsx
const Block = (block: PageBlocks) => {
  switch (block.__typename) {
   
    // ...

    case "PageBlocksYourComponent":
      return <YourComponent data={block} />;
    default:
      return null;
  }
};

On this page