diff --git a/example/package.json b/example/package.json
index 193c13d..1cc0091 100644
--- a/example/package.json
+++ b/example/package.json
@@ -10,7 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.3.5",
+    "next": "^9.5.3",
     "node-fetch": "^2.6.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
diff --git a/example/pages/[pageId].tsx b/example/pages/[pageId].tsx
index d3b1541..1055cf6 100644
--- a/example/pages/[pageId].tsx
+++ b/example/pages/[pageId].tsx
@@ -1,5 +1,7 @@
+import React from "react";
 import { NotionRenderer, BlockMapType } from "react-notion";
 import Head from "next/head";
+import Link from "next/link";
 import fetch from "node-fetch";
 
 export async function getServerSideProps(context) {
@@ -39,7 +41,15 @@ const NotionPage = ({ blockMap }) => {
       <Head>
         <title>{title}</title>
       </Head>
-      <NotionRenderer blockMap={blockMap} fullPage />
+      <NotionRenderer
+        blockMap={blockMap}
+        fullPage
+        customBlockComponents={{
+          page: ({ blockValue, renderComponent }) => (
+            <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
+          )
+        }}
+      />
       <style jsx global>{`
         div :global(.notion-code) {
           box-sizing: border-box;
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
index c170613..28981cd 100644
--- a/example/pages/index.tsx
+++ b/example/pages/index.tsx
@@ -1,5 +1,6 @@
 import { NotionRenderer, BlockMapType } from "react-notion";
 import Head from "next/head";
+import Link from "next/link";
 import fetch from "node-fetch";
 
 export async function getStaticProps() {
@@ -26,7 +27,14 @@ const Home = ({ blockMap }) => (
     <Head>
       <title>react-notion example</title>
     </Head>
-    <NotionRenderer blockMap={blockMap} />
+    <NotionRenderer
+      blockMap={blockMap}
+      customBlockComponents={{
+        page: ({ blockValue, renderComponent }) => (
+          <Link href={`/${blockValue.id}`}>{renderComponent()}</Link>
+        )
+      }}
+    />
   </div>
 );
 
diff --git a/example/yarn.lock b/example/yarn.lock
index f0adde1..6b563df 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -3310,7 +3310,7 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-next@^9.3.5:
+next@^9.5.3:
   version "9.5.3"
   resolved "https://registry.yarnpkg.com/next/-/next-9.5.3.tgz#7af5270631f98d330a7f75a6e8e1ac202aa155e2"
   integrity sha512-DGrpTNGV2RNMwLaSzpgbkbaUuVk30X71/roXHS10isSXo2Gm+qWcjonDyOxf1KmOvHZRHA/Fa+LaAR7ysdYS3A==
diff --git a/src/block.tsx b/src/block.tsx
index 672b34f..f67c4b8 100644
--- a/src/block.tsx
+++ b/src/block.tsx
@@ -5,7 +5,11 @@ import {
   ContentValueType,
   BlockMapType,
   MapPageUrl,
-  MapImageUrl
+  MapImageUrl,
+  CustomBlockComponents,
+  BlockValueProp,
+  CustomDecoratorComponents,
+  CustomDecoratorComponentProps
 } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
@@ -13,42 +17,68 @@ import PageIcon from "./components/page-icon";
 import PageHeader from "./components/page-header";
 import { classNames, getTextContent, getListNumber } from "./utils";
 
-export const renderChildText = (properties: DecorationType[]) => {
+export const createRenderChildText = (
+  customDecoratorComponents?: CustomDecoratorComponents
+) => (properties: DecorationType[]) => {
   return properties?.map(([text, decorations], i) => {
     if (!decorations) {
       return <React.Fragment key={i}>{text}</React.Fragment>;
     }
 
     return decorations.reduceRight((element, decorator) => {
-      switch (decorator[0]) {
-        case "h":
-          return (
-            <span key={i} className={`notion-${decorator[1]}`}>
-              {element}
-            </span>
-          );
-        case "c":
-          return (
-            <code key={i} className="notion-inline-code">
-              {element}
-            </code>
-          );
-        case "b":
-          return <b key={i}>{element}</b>;
-        case "i":
-          return <em key={i}>{element}</em>;
-        case "s":
-          return <s key={i}>{element}</s>;
-        case "a":
-          return (
-            <a className="notion-link" href={decorator[1]} key={i}>
-              {element}
-            </a>
-          );
+      const renderText = () => {
+        switch (decorator[0]) {
+          case "h":
+            return (
+              <span key={i} className={`notion-${decorator[1]}`}>
+                {element}
+              </span>
+            );
+          case "c":
+            return (
+              <code key={i} className="notion-inline-code">
+                {element}
+              </code>
+            );
+          case "b":
+            return <b key={i}>{element}</b>;
+          case "i":
+            return <em key={i}>{element}</em>;
+          case "s":
+            return <s key={i}>{element}</s>;
+          case "a":
+            return (
+              <a className="notion-link" href={decorator[1]} key={i}>
+                {element}
+              </a>
+            );
+
+          default:
+            return <React.Fragment key={i}>{element}</React.Fragment>;
+        }
+      };
 
-        default:
-          return <React.Fragment key={i}>{element}</React.Fragment>;
+      const CustomComponent = customDecoratorComponents?.[decorator[0]];
+
+      if (CustomComponent) {
+        const props = (decorator[1]
+          ? {
+              decoratorValue: decorator[1]
+            }
+          : {}) as CustomDecoratorComponentProps<typeof decorator[0]>;
+
+        return (
+          <CustomComponent
+            key={i}
+            {...(props as any)}
+            renderComponent={renderText}
+          >
+            {text}
+          </CustomComponent>
+        );
       }
+
+      return renderText();
     }, <>{text}</>);
   });
 };
@@ -62,6 +92,8 @@ interface Block {
 
   fullPage?: boolean;
   hideHeader?: boolean;
+  customBlockComponents?: CustomBlockComponents;
+  customDecoratorComponents?: CustomDecoratorComponents;
 }
 
 export const Block: React.FC<Block> = props => {
@@ -73,387 +105,417 @@ export const Block: React.FC<Block> = props => {
     hideHeader,
     blockMap,
     mapPageUrl,
-    mapImageUrl
+    mapImageUrl,
+    customBlockComponents,
+    customDecoratorComponents
   } = props;
   const blockValue = block?.value;
 
-  switch (blockValue?.type) {
-    case "page":
-      if (level === 0) {
-        if (fullPage) {
-          if (!blockValue.properties) {
-            return null;
-          }
+  const renderComponent = () => {
+    const renderChildText = createRenderChildText(customDecoratorComponents);
 
-          const {
-            page_icon,
-            page_cover,
-            page_cover_position,
-            page_full_width,
-            page_small_text
-          } = blockValue.format || {};
+    switch (blockValue?.type) {
+      case "page":
+        if (level === 0) {
+          if (fullPage) {
+            if (!blockValue.properties) {
+              return null;
+            }
 
-          const coverPosition = (1 - (page_cover_position || 0.5)) * 100;
+            const {
+              page_icon,
+              page_cover,
+              page_cover_position,
+              page_full_width,
+              page_small_text
+            } = blockValue.format || {};
 
-          return (
-            <div className="notion notion-app">
-              <div className="notion-cursor-listener">
-                <div className="notion-frame">
-                  {!hideHeader && (
-                    <PageHeader
-                      blockMap={blockMap}
-                      mapPageUrl={mapPageUrl}
-                      mapImageUrl={mapImageUrl}
-                    />
-                  )}
+            const coverPosition = (1 - (page_cover_position || 0.5)) * 100;
 
-                  <div className="notion-scroller">
-                    {page_cover && (
-                      <img
-                        src={mapImageUrl(page_cover)}
-                        alt={getTextContent(blockValue.properties.title)}
-                        className="notion-page-cover"
-                        style={{
-                          objectPosition: `center ${coverPosition}%`
-                        }}
+            return (
+              <div className="notion notion-app">
+                <div className="notion-cursor-listener">
+                  <div className="notion-frame">
+                    {!hideHeader && (
+                      <PageHeader
+                        blockMap={blockMap}
+                        mapPageUrl={mapPageUrl}
+                        mapImageUrl={mapImageUrl}
                       />
                     )}
-                    <main
-                      className={classNames(
-                        "notion-page",
-                        !page_cover && "notion-page-offset",
-                        page_full_width && "notion-full-width",
-                        page_small_text && "notion-small-text"
-                      )}
-                    >
-                      {page_icon && (
-                        <PageIcon
-                          className={
-                            page_cover ? "notion-page-icon-offset" : undefined
-                          }
-                          block={block}
-                          big
-                          mapImageUrl={mapImageUrl}
+
+                    <div className="notion-scroller">
+                      {page_cover && (
+                        <img
+                          src={mapImageUrl(page_cover)}
+                          alt={getTextContent(blockValue.properties.title)}
+                          className="notion-page-cover"
+                          style={{
+                            objectPosition: `center ${coverPosition}%`
+                          }}
                         />
                       )}
+                      <main
+                        className={classNames(
+                          "notion-page",
+                          !page_cover && "notion-page-offset",
+                          page_full_width && "notion-full-width",
+                          page_small_text && "notion-small-text"
+                        )}
+                      >
+                        {page_icon && (
+                          <PageIcon
+                            className={
+                              page_cover ? "notion-page-icon-offset" : undefined
+                            }
+                            block={block}
+                            big
+                            mapImageUrl={mapImageUrl}
+                          />
+                        )}
 
-                      <div className="notion-title">
-                        {renderChildText(blockValue.properties.title)}
-                      </div>
+                        <div className="notion-title">
+                          {renderChildText(blockValue.properties.title)}
+                        </div>
 
-                      {children}
-                    </main>
+                        {children}
+                      </main>
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
-          );
+            );
+          } else {
+            return <main className="notion">{children}</main>;
+          }
         } else {
-          return <main className="notion">{children}</main>;
+          if (!blockValue.properties) return null;
+          return (
+            <a className="notion-page-link" href={mapPageUrl(blockValue.id)}>
+              {blockValue.format && (
+                <div className="notion-page-icon">
+                  <PageIcon block={block} mapImageUrl={mapImageUrl} />
+                </div>
+              )}
+              <div className="notion-page-text">
+                {renderChildText(blockValue.properties.title)}
+              </div>
+            </a>
+          );
         }
-      } else {
+      case "header":
         if (!blockValue.properties) return null;
         return (
-          <a className="notion-page-link" href={mapPageUrl(blockValue.id)}>
-            {blockValue.format && (
-              <div className="notion-page-icon">
-                <PageIcon block={block} mapImageUrl={mapImageUrl} />
-              </div>
-            )}
-            <div className="notion-page-text">
-              {renderChildText(blockValue.properties.title)}
-            </div>
-          </a>
+          <h1 className="notion-h1">
+            {renderChildText(blockValue.properties.title)}
+          </h1>
         );
-      }
-    case "header":
-      if (!blockValue.properties) return null;
-      return (
-        <h1 className="notion-h1">
-          {renderChildText(blockValue.properties.title)}
-        </h1>
-      );
-    case "sub_header":
-      if (!blockValue.properties) return null;
-      return (
-        <h2 className="notion-h2">
-          {renderChildText(blockValue.properties.title)}
-        </h2>
-      );
-    case "sub_sub_header":
-      if (!blockValue.properties) return null;
-      return (
-        <h3 className="notion-h3">
-          {renderChildText(blockValue.properties.title)}
-        </h3>
-      );
-    case "divider":
-      return <hr className="notion-hr" />;
-    case "text":
-      if (!blockValue.properties) {
-        return <div className="notion-blank">&nbsp;</div>;
-      }
-      const blockColor = blockValue.format?.block_color;
-      return (
-        <p
-          className={classNames(
-            `notion-text`,
-            blockColor && `notion-${blockColor}`
-          )}
-        >
-          {renderChildText(blockValue.properties.title)}
-        </p>
-      );
-    case "bulleted_list":
-    case "numbered_list":
-      const wrapList = (content: React.ReactNode, start?: number) =>
-        blockValue.type === "bulleted_list" ? (
-          <ul className="notion-list notion-list-disc">{content}</ul>
-        ) : (
-          <ol start={start} className="notion-list notion-list-numbered">
-            {content}
-          </ol>
+      case "sub_header":
+        if (!blockValue.properties) return null;
+        return (
+          <h2 className="notion-h2">
+            {renderChildText(blockValue.properties.title)}
+          </h2>
+        );
+      case "sub_sub_header":
+        if (!blockValue.properties) return null;
+        return (
+          <h3 className="notion-h3">
+            {renderChildText(blockValue.properties.title)}
+          </h3>
+        );
+      case "divider":
+        return <hr className="notion-hr" />;
+      case "text":
+        if (!blockValue.properties) {
+          return <div className="notion-blank">&nbsp;</div>;
+        }
+        const blockColor = blockValue.format?.block_color;
+        return (
+          <p
+            className={classNames(
+              `notion-text`,
+              blockColor && `notion-${blockColor}`
+            )}
+          >
+            {renderChildText(blockValue.properties.title)}
+          </p>
         );
+      case "bulleted_list":
+      case "numbered_list":
+        const wrapList = (content: React.ReactNode, start?: number) =>
+          blockValue.type === "bulleted_list" ? (
+            <ul className="notion-list notion-list-disc">{content}</ul>
+          ) : (
+            <ol start={start} className="notion-list notion-list-numbered">
+              {content}
+            </ol>
+          );
 
-      let output: JSX.Element | null = null;
+        let output: JSX.Element | null = null;
 
-      if (blockValue.content) {
-        output = (
-          <>
-            {blockValue.properties && (
-              <li>{renderChildText(blockValue.properties.title)}</li>
+        if (blockValue.content) {
+          output = (
+            <>
+              {blockValue.properties && (
+                <li>{renderChildText(blockValue.properties.title)}</li>
+              )}
+              {wrapList(children)}
+            </>
+          );
+        } else {
+          output = blockValue.properties ? (
+            <li>{renderChildText(blockValue.properties.title)}</li>
+          ) : null;
+        }
+
+        const isTopLevel =
+          block.value.type !== blockMap[block.value.parent_id].value.type;
+        const start = getListNumber(blockValue.id, blockMap);
+
+        return isTopLevel ? wrapList(output, start) : output;
+
+      case "image":
+      case "embed":
+      case "figma":
+      case "video":
+        const value = block.value as ContentValueType;
+
+        return (
+          <figure
+            className="notion-asset-wrapper"
+            style={
+              value.format !== undefined
+                ? { width: value.format.block_width }
+                : undefined
+            }
+          >
+            <Asset block={block} mapImageUrl={mapImageUrl} />
+
+            {value.properties.caption && (
+              <figcaption className="notion-image-caption">
+                {renderChildText(value.properties.caption)}
+              </figcaption>
             )}
-            {wrapList(children)}
-          </>
+          </figure>
         );
-      } else {
-        output = blockValue.properties ? (
-          <li>{renderChildText(blockValue.properties.title)}</li>
-        ) : null;
+      case "code": {
+        if (blockValue.properties.title) {
+          const content = blockValue.properties.title[0][0];
+          const language = blockValue.properties.language[0][0];
+          return (
+            <Code
+              key={blockValue.id}
+              language={language || ""}
+              code={content}
+            />
+          );
+        }
+        break;
       }
-
-      const isTopLevel =
-        block.value.type !== blockMap[block.value.parent_id].value.type;
-      const start = getListNumber(blockValue.id, blockMap);
-
-      return isTopLevel ? wrapList(output, start) : output;
-
-    case "image":
-    case "embed":
-    case "figma":
-    case "video":
-      const value = block.value as ContentValueType;
-
-      return (
-        <figure
-          className="notion-asset-wrapper"
-          style={
-            value.format !== undefined
-              ? { width: value.format.block_width }
-              : undefined
-          }
-        >
-          <Asset block={block} mapImageUrl={mapImageUrl} />
-
-          {value.properties.caption && (
-            <figcaption className="notion-image-caption">
-              {renderChildText(value.properties.caption)}
-            </figcaption>
-          )}
-        </figure>
-      );
-    case "code": {
-      if (blockValue.properties.title) {
-        const content = blockValue.properties.title[0][0];
-        const language = blockValue.properties.language[0][0];
+      case "column_list":
+        return <div className="notion-row">{children}</div>;
+      case "column":
+        const spacerWith = 46;
+        const ratio = blockValue.format.column_ratio;
+        const columns = Number((1 / ratio).toFixed(0));
+        const spacerTotalWith = (columns - 1) * spacerWith;
+        const width = `calc((100% - ${spacerTotalWith}px) * ${ratio})`;
         return (
-          <Code key={blockValue.id} language={language || ""} code={content} />
+          <>
+            <div className="notion-column" style={{ width }}>
+              {children}
+            </div>
+            <div className="notion-spacer" style={{ width: spacerWith }} />
+          </>
         );
-      }
-      break;
-    }
-    case "column_list":
-      return <div className="notion-row">{children}</div>;
-    case "column":
-      const spacerWith = 46;
-      const ratio = blockValue.format.column_ratio;
-      const columns = Number((1 / ratio).toFixed(0));
-      const spacerTotalWith = (columns - 1) * spacerWith;
-      const width = `calc((100% - ${spacerTotalWith}px) * ${ratio})`;
-      return (
-        <>
-          <div className="notion-column" style={{ width }}>
-            {children}
-          </div>
-          <div className="notion-spacer" style={{ width: spacerWith }} />
-        </>
-      );
-    case "quote":
-      if (!blockValue.properties) return null;
-      return (
-        <blockquote className="notion-quote">
-          {renderChildText(blockValue.properties.title)}
-        </blockquote>
-      );
-    case "collection_view":
-      if (!block) return null;
-
-      const collectionView = block?.collection?.types[0];
-
-      return (
-        <div>
-          <h3 className="notion-h3">
-            {renderChildText(block.collection?.title!)}
-          </h3>
+      case "quote":
+        if (!blockValue.properties) return null;
+        return (
+          <blockquote className="notion-quote">
+            {renderChildText(blockValue.properties.title)}
+          </blockquote>
+        );
+      case "collection_view":
+        if (!block) return null;
+
+        const collectionView = block?.collection?.types[0];
 
-          {collectionView?.type === "table" && (
-            <div style={{ maxWidth: "100%", marginTop: 5 }}>
-              <table className="notion-table">
-                <thead>
-                  <tr className="notion-tr">
-                    {collectionView.format?.table_properties
-                      ?.filter(p => p.visible)
-                      .map((gp, index) => (
-                        <th
-                          className="notion-th"
-                          key={index}
-                          style={{ minWidth: gp.width }}
-                        >
-                          {block.collection?.schema[gp.property]?.name}
-                        </th>
-                      ))}
-                  </tr>
-                </thead>
-
-                <tbody>
-                  {block?.collection?.data.map((row, index) => (
-                    <tr className="notion-tr" key={index}>
+        return (
+          <div>
+            <h3 className="notion-h3">
+              {renderChildText(block.collection?.title!)}
+            </h3>
+
+            {collectionView?.type === "table" && (
+              <div style={{ maxWidth: "100%", marginTop: 5 }}>
+                <table className="notion-table">
+                  <thead>
+                    <tr className="notion-tr">
                       {collectionView.format?.table_properties
                         ?.filter(p => p.visible)
                         .map((gp, index) => (
-                          <td
+                          <th
+                            className="notion-th"
                             key={index}
+                            style={{ minWidth: gp.width }}
+                          >
+                            {block.collection?.schema[gp.property]?.name}
+                          </th>
+                        ))}
+                    </tr>
+                  </thead>
+
+                  <tbody>
+                    {block?.collection?.data.map((row, index) => (
+                      <tr className="notion-tr" key={index}>
+                        {collectionView.format?.table_properties
+                          ?.filter(p => p.visible)
+                          .map((gp, index) => (
+                            <td
+                              key={index}
+                              className={
+                                "notion-td " +
+                                (gp.property === "title" ? "notion-bold" : "")
+                              }
+                            >
+                              {
+                                renderChildText(
+                                  row[
+                                    block.collection?.schema[gp.property]?.name!
+                                  ]
+                                )!
+                              }
+                            </td>
+                          ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+
+            {collectionView?.type === "gallery" && (
+              <div className="notion-gallery">
+                {block.collection?.data.map((row, i) => (
+                  <div key={`col-${i}`} className="notion-gallery-card">
+                    <div className="notion-gallery-content">
+                      {collectionView.format?.gallery_properties
+                        ?.filter(p => p.visible)
+                        .map((gp, idx) => (
+                          <p
+                            key={idx + "item"}
                             className={
-                              "notion-td " +
-                              (gp.property === "title" ? "notion-bold" : "")
+                              "notion-gallery-data " +
+                              (idx === 0 ? "is-first" : "")
                             }
                           >
-                            {
-                              renderChildText(
-                                row[
-                                  block.collection?.schema[gp.property]?.name!
-                                ]
-                              )!
-                            }
-                          </td>
+                            {getTextContent(
+                              row[block.collection?.schema[gp.property].name!]
+                            )}
+                          </p>
                         ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-
-          {collectionView?.type === "gallery" && (
-            <div className="notion-gallery">
-              {block.collection?.data.map((row, i) => (
-                <div key={`col-${i}`} className="notion-gallery-card">
-                  <div className="notion-gallery-content">
-                    {collectionView.format?.gallery_properties
-                      ?.filter(p => p.visible)
-                      .map((gp, idx) => (
-                        <p
-                          key={idx + "item"}
-                          className={
-                            "notion-gallery-data " +
-                            (idx === 0 ? "is-first" : "")
-                          }
-                        >
-                          {getTextContent(
-                            row[block.collection?.schema[gp.property].name!]
-                          )}
-                        </p>
-                      ))}
+                    </div>
                   </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      );
-    case "callout":
-      return (
-        <div
-          className={classNames(
-            "notion-callout",
-            blockValue.format.block_color &&
-              `notion-${blockValue.format.block_color}_co`
-          )}
-        >
-          <div>
-            <PageIcon block={block} mapImageUrl={mapImageUrl} />
-          </div>
-          <div className="notion-callout-text">
-            {renderChildText(blockValue.properties.title)}
+                ))}
+              </div>
+            )}
           </div>
-        </div>
-      );
-    case "bookmark":
-      const link = blockValue.properties.link;
-      const title = blockValue.properties.title ?? link;
-      const description = blockValue.properties.description;
-      const block_color = blockValue.format?.block_color;
-      const bookmark_icon = blockValue.format?.bookmark_icon;
-      const bookmark_cover = blockValue.format?.bookmark_cover;
-
-      return (
-        <div className="notion-row">
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
+        );
+      case "callout":
+        return (
+          <div
             className={classNames(
-              "notion-bookmark",
-              block_color && `notion-${block_color}`
+              "notion-callout",
+              blockValue.format.block_color &&
+                `notion-${blockValue.format.block_color}_co`
             )}
-            href={link[0][0]}
           >
             <div>
-              <div className="notion-bookmark-title">
-                {renderChildText(title)}
+              <PageIcon block={block} mapImageUrl={mapImageUrl} />
+            </div>
+            <div className="notion-callout-text">
+              {renderChildText(blockValue.properties.title)}
+            </div>
+          </div>
+        );
+      case "bookmark":
+        const link = blockValue.properties.link;
+        const title = blockValue.properties.title ?? link;
+        const description = blockValue.properties.description;
+        const block_color = blockValue.format?.block_color;
+        const bookmark_icon = blockValue.format?.bookmark_icon;
+        const bookmark_cover = blockValue.format?.bookmark_cover;
+
+        return (
+          <div className="notion-row">
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              className={classNames(
+                "notion-bookmark",
+                block_color && `notion-${block_color}`
+              )}
+              href={link[0][0]}
+            >
+              <div>
+                <div className="notion-bookmark-title">
+                  {renderChildText(title)}
+                </div>
+                {description && (
+                  <div className="notion-bookmark-description">
+                    {renderChildText(description)}
+                  </div>
+                )}
+
+                <div className="notion-bookmark-link">
+                  {bookmark_icon && (
+                    <img src={bookmark_icon} alt={getTextContent(title)} />
+                  )}
+                  <div>{renderChildText(link)}</div>
+                </div>
               </div>
-              {description && (
-                <div className="notion-bookmark-description">
-                  {renderChildText(description)}
+              {bookmark_cover && (
+                <div className="notion-bookmark-image">
+                  <img src={bookmark_cover} alt={getTextContent(title)} />
                 </div>
               )}
+            </a>
+          </div>
+        );
+      case "toggle":
+        return (
+          <details className="notion-toggle">
+            <summary>{renderChildText(blockValue.properties.title)}</summary>
+            <div>{children}</div>
+          </details>
+        );
+      default:
+        if (process.env.NODE_ENV !== "production") {
+          console.log("Unsupported type " + block?.value?.type);
+        }
+        return <div />;
+    }
+    return null;
+  };
 
-              <div className="notion-bookmark-link">
-                {bookmark_icon && (
-                  <img src={bookmark_icon} alt={getTextContent(title)} />
-                )}
-                <div>{renderChildText(link)}</div>
-              </div>
-            </div>
-            {bookmark_cover && (
-              <div className="notion-bookmark-image">
-                <img src={bookmark_cover} alt={getTextContent(title)} />
-              </div>
-            )}
-          </a>
-        </div>
-      );
-    case "toggle":
-      return (
-        <details className="notion-toggle">
-          <summary>{renderChildText(blockValue.properties.title)}</summary>
-          <div>{children}</div>
-        </details>
-      );
-    default:
-      if (process.env.NODE_ENV !== "production") {
-        console.log("Unsupported type " + block?.value?.type);
-      }
-      return <div />;
+  // render a custom component first if passed.
+  if (
+    customBlockComponents &&
+    customBlockComponents[blockValue?.type] &&
+    // Do not use custom component for base page block
+    level !== 0
+  ) {
+    const CustomComponent = customBlockComponents[blockValue?.type]!;
+    return (
+      <CustomComponent
+        renderComponent={renderComponent}
+        blockValue={blockValue as BlockValueProp<typeof blockValue.type>}
+      >
+        {children}
+      </CustomComponent>
+    );
   }
-  return null;
+
+  return renderComponent();
 };
diff --git a/src/renderer.tsx b/src/renderer.tsx
index bbda15b..8da93e3 100644
--- a/src/renderer.tsx
+++ b/src/renderer.tsx
@@ -1,5 +1,11 @@
 import React from "react";
-import { BlockMapType, MapPageUrl, MapImageUrl } from "./types";
+import {
+  BlockMapType,
+  MapPageUrl,
+  MapImageUrl,
+  CustomBlockComponents,
+  CustomDecoratorComponents
+} from "./types";
 import { Block } from "./block";
 import { defaultMapImageUrl, defaultMapPageUrl } from "./utils";
 
@@ -12,6 +18,8 @@ export interface NotionRendererProps {
 
   currentId?: string;
   level?: number;
+  customBlockComponents?: CustomBlockComponents;
+  customDecoratorComponents?: CustomDecoratorComponents;
 }
 
 export const NotionRenderer: React.FC<NotionRendererProps> = ({
diff --git a/src/types.ts b/src/types.ts
index 7f77858..a73c988 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,6 +8,8 @@
  *
  */
 
+import { FC } from "react";
+
 /**
  * Base properties that all blocks share.
  */
@@ -256,6 +258,13 @@ interface TableCollectionType extends BaseValueType {
   };
 }
 
+export interface TweetType extends BaseValueType {
+  type: "tweet";
+  properties: {
+    source: [string[]];
+  };
+}
+
 export type CollectionViewType = TableGalleryType | TableCollectionType;
 
 /**
@@ -282,7 +291,10 @@ export type BlockValueType =
   | CalloutValueType
   | BookmarkValueType
   | ToggleValueType
-  | CollectionValueType;
+  | CollectionValueType
+  | TweetType;
+
+export type BlockValueTypeKeys = BlockValueType["type"];
 
 export interface BlockType {
   role: string;
@@ -329,3 +341,34 @@ export interface LoadPageChunkData {
 
 export type MapPageUrl = (pageId: string) => string;
 export type MapImageUrl = (image: string, block?: BlockType) => string;
+
+export type BlockValueProp<T> = Extract<BlockValueType, { type: T }>;
+
+export interface CustomBlockComponentProps<T extends BlockValueTypeKeys> {
+  renderComponent: () => JSX.Element | null;
+  blockValue: T extends BlockValueType ? BlockValueProp<T> : BaseValueType;
+}
+
+export type CustomBlockComponents = {
+  [K in BlockValueTypeKeys]?: FC<CustomBlockComponentProps<K>>;
+};
+
+type SubDecorationSymbol = SubDecorationType[0];
+type SubDecorationValue<T extends SubDecorationSymbol> = Extract<
+  SubDecorationType,
+  [T, any]
+>[1];
+
+export type CustomDecoratorComponentProps<
+  T extends SubDecorationSymbol
+> = (SubDecorationValue<T> extends never
+  ? {}
+  : {
+      decoratorValue: SubDecorationValue<T>;
+    }) & {
+  renderComponent: () => JSX.Element | null;
+};
+
+export type CustomDecoratorComponents = {
+  [K in SubDecorationSymbol]?: FC<CustomDecoratorComponentProps<K>>;
+};
