diff --git a/packages/notion-types/src/core.ts b/packages/notion-types/src/core.ts
index fac587474..b3d7ba9e0 100644
--- a/packages/notion-types/src/core.ts
+++ b/packages/notion-types/src/core.ts
@@ -45,6 +45,7 @@ export type PropertyType =
   | 'select'
   | 'status'
   | 'multi_select'
+  | 'auto_increment_id'
   | 'date'
   | 'person'
   | 'file'
diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
index 63140538d..edfb838d2 100644
--- a/packages/react-notion-x/src/context.tsx
+++ b/packages/react-notion-x/src/context.tsx
@@ -131,6 +131,7 @@ const defaultComponents: NotionComponents = {
   propertyLastEditedTimeValue: dummyOverrideFn,
   propertyCreatedTimeValue: dummyOverrideFn,
   propertyDateValue: dummyOverrideFn,
+  propertyAutoIncrementIdValue: dummyOverrideFn,
 
   Pdf: dummyComponent('Pdf'),
   Tweet: dummyComponent('Tweet'),
diff --git a/packages/react-notion-x/src/icons/property-icon.tsx b/packages/react-notion-x/src/icons/property-icon.tsx
index 2e3981a3d..07428475e 100644
--- a/packages/react-notion-x/src/icons/property-icon.tsx
+++ b/packages/react-notion-x/src/icons/property-icon.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 
 import { PropertyType } from 'notion-types'
 
+import AutoIncrementIdIcon from './type-auto-increment-id'
 import CheckboxIcon from './type-checkbox'
 import DateIcon from './type-date'
 import EmailIcon from './type-email'
@@ -44,7 +45,8 @@ const iconMap = {
   created_time: TimestampIcon,
   last_edited_time: TimestampIcon,
   created_by: Person2Icon,
-  last_edited_by: Person2Icon
+  last_edited_by: Person2Icon,
+  auto_increment_id: AutoIncrementIdIcon
 }
 
 export const PropertyIcon: React.FC<PropertyIconProps> = ({
diff --git a/packages/react-notion-x/src/icons/type-auto-increment-id.svg b/packages/react-notion-x/src/icons/type-auto-increment-id.svg
new file mode 100644
index 000000000..ac3433215
--- /dev/null
+++ b/packages/react-notion-x/src/icons/type-auto-increment-id.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  version="1.1"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  viewBox="0 0 14 14"
+>
+  <path
+    d="M12.252 7.9209C13.7217 7.9209 14.7266 6.93652 14.7266 5.50781C14.7266 4.0791 13.7217 3.10156 12.252 3.10156C10.8232 3.10156 9.8457 4.0791 9.8457 5.50781C9.8457 6.93652 10.8301 7.9209 12.252 7.9209ZM2.00488 13.1367C2.45605 13.1367 2.72949 12.8496 2.72949 12.3848V5.83594L7.35059 12.5967C7.6377 12.9932 7.86328 13.1367 8.20508 13.1367C8.69043 13.1367 8.96387 12.8359 8.96387 12.3232V3.8877C8.96387 3.42285 8.69043 3.12891 8.23242 3.12891C7.78809 3.12891 7.50781 3.41602 7.50781 3.8877V10.4229L2.89355 3.66895C2.60645 3.25879 2.40137 3.12891 2.03906 3.12891C1.56738 3.12891 1.27344 3.4502 1.27344 3.94238V12.3848C1.27344 12.8496 1.55371 13.1367 2.00488 13.1367ZM12.252 6.84766C11.5615 6.84766 11.0898 6.30762 11.0898 5.50781C11.0898 4.70801 11.5615 4.16797 12.252 4.16797C12.9902 4.16797 13.4756 4.70801 13.4756 5.50781C13.4756 6.30762 12.9834 6.84766 12.252 6.84766ZM10.625 9.77344H13.9541C14.3506 9.77344 14.624 9.54102 14.624 9.14453C14.624 8.74805 14.3506 8.50195 13.9541 8.50195H10.625C10.2285 8.50195 9.96191 8.74805 9.96191 9.14453C9.96191 9.54102 10.2285 9.77344 10.625 9.77344 Z"
+  ></path>
+</svg>
\ No newline at end of file
diff --git a/packages/react-notion-x/src/icons/type-auto-increment-id.tsx b/packages/react-notion-x/src/icons/type-auto-increment-id.tsx
new file mode 100644
index 000000000..82653a4e8
--- /dev/null
+++ b/packages/react-notion-x/src/icons/type-auto-increment-id.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+function SvgTypeAutoIncrementId(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 16 16' {...props}>
+      <path d='M12.252 7.9209C13.7217 7.9209 14.7266 6.93652 14.7266 5.50781C14.7266 4.0791 13.7217 3.10156 12.252 3.10156C10.8232 3.10156 9.8457 4.0791 9.8457 5.50781C9.8457 6.93652 10.8301 7.9209 12.252 7.9209ZM2.00488 13.1367C2.45605 13.1367 2.72949 12.8496 2.72949 12.3848V5.83594L7.35059 12.5967C7.6377 12.9932 7.86328 13.1367 8.20508 13.1367C8.69043 13.1367 8.96387 12.8359 8.96387 12.3232V3.8877C8.96387 3.42285 8.69043 3.12891 8.23242 3.12891C7.78809 3.12891 7.50781 3.41602 7.50781 3.8877V10.4229L2.89355 3.66895C2.60645 3.25879 2.40137 3.12891 2.03906 3.12891C1.56738 3.12891 1.27344 3.4502 1.27344 3.94238V12.3848C1.27344 12.8496 1.55371 13.1367 2.00488 13.1367ZM12.252 6.84766C11.5615 6.84766 11.0898 6.30762 11.0898 5.50781C11.0898 4.70801 11.5615 4.16797 12.252 4.16797C12.9902 4.16797 13.4756 4.70801 13.4756 5.50781C13.4756 6.30762 12.9834 6.84766 12.252 6.84766ZM10.625 9.77344H13.9541C14.3506 9.77344 14.624 9.54102 14.624 9.14453C14.624 8.74805 14.3506 8.50195 13.9541 8.50195H10.625C10.2285 8.50195 9.96191 8.74805 9.96191 9.14453C9.96191 9.54102 10.2285 9.77344 10.625 9.77344Z' />
+    </svg>
+  )
+}
+
+export default SvgTypeAutoIncrementId
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 184e8b3f0..d380401d4 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -10,6 +10,7 @@
   --fg-color-4: #000;
   --fg-color-5: rgba(55, 53, 47, 0.024);
   --fg-color-6: rgba(55, 53, 47, 0.8);
+  --fg-color-7: rgba(55, 53, 47, 0.5);
   --fg-color-icon: var(--fg-color);
 
   --bg-color: #fff;
@@ -1409,6 +1410,10 @@ svg.notion-page-icon {
   padding: 7px 8px 0;
 }
 
+.notion-table-cell-auto_increment_id {
+  color: var(--fg-color-7);
+}
+
 .notion-property-select,
 .notion-property-status,
 .notion-property-multi_select {
@@ -2158,6 +2163,10 @@ svg.notion-page-icon {
   width: 100%;
 }
 
+.notion-collection-row-property .notion-property-auto_increment_id {
+  color: var(--fg-color-7);
+}
+
 .notion-collection-row-property .notion-collection-column-title-icon {
   width: 16px;
   height: 16px;
diff --git a/packages/react-notion-x/src/third-party/property.tsx b/packages/react-notion-x/src/third-party/property.tsx
index 5ef8f6fa2..1d520570b 100644
--- a/packages/react-notion-x/src/third-party/property.tsx
+++ b/packages/react-notion-x/src/third-party/property.tsx
@@ -276,6 +276,14 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
     [block, data, schema]
   )
 
+  const renderAutoIncrementIdValue = React.useMemo(
+    () =>
+      function renderAutoIncrementIdValueProperty() {
+        return <Text value={data} block={block} />
+      },
+    [block, data]
+  )
+
   const renderCreatedTimeValue = React.useMemo(
     () =>
       function CreatedTimeProperty() {
@@ -456,6 +464,12 @@ export const PropertyImpl: React.FC<IPropertyProps> = (props) => {
         // console.log('last_edited_by', schema, data)
         break
 
+      case 'auto_increment_id':
+        content = components.propertyTextValue(
+          props,
+          renderAutoIncrementIdValue
+        )
+        break
       case 'text':
         content = components.propertyTextValue(props, renderTextValue)
         break
diff --git a/packages/react-notion-x/src/types.ts b/packages/react-notion-x/src/types.ts
index 9eec16c9d..f6f7a0dea 100644
--- a/packages/react-notion-x/src/types.ts
+++ b/packages/react-notion-x/src/types.ts
@@ -47,6 +47,7 @@ export interface NotionComponents {
   propertyLastEditedTimeValue: ComponentOverrideFn
   propertyCreatedTimeValue: ComponentOverrideFn
   propertyDateValue: ComponentOverrideFn
+  propertyAutoIncrementIdValue: ComponentOverrideFn
 
   // assets
   Pdf: any