diff --git a/src/content/components/date-components/Calendar/index.ts b/src/content/components/date-components/Calendar/index.ts
new file mode 100644
index 000000000000..801ec7e7d37e
--- /dev/null
+++ b/src/content/components/date-components/Calendar/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const calendarConfig: Component = {
+    id: 'calendar',
+    title: 'Calendar',
+    isComingSoon: true,
+};
diff --git a/src/content/components/date-components/DateField/index.ts b/src/content/components/date-components/DateField/index.ts
new file mode 100644
index 000000000000..225c35dbf7a7
--- /dev/null
+++ b/src/content/components/date-components/DateField/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const dateFieldConfig: Component = {
+    id: 'date-field',
+    title: 'Date Field',
+    isComingSoon: true,
+};
diff --git a/src/content/components/date-components/DatePicker/index.ts b/src/content/components/date-components/DatePicker/index.ts
new file mode 100644
index 000000000000..817a7df8f041
--- /dev/null
+++ b/src/content/components/date-components/DatePicker/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const datePickerConfig: Component = {
+    id: 'date-picker',
+    title: 'Date Picker',
+    isComingSoon: true,
+};
diff --git a/src/content/components/date-components/RangeCalendar/index.ts b/src/content/components/date-components/RangeCalendar/index.ts
new file mode 100644
index 000000000000..6b51915e5fda
--- /dev/null
+++ b/src/content/components/date-components/RangeCalendar/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const rangeCalendarConfig: Component = {
+    id: 'range-calendar',
+    title: 'Range Calendar',
+    isComingSoon: true,
+};
diff --git a/src/content/components/date-components/RelativeDateField/index.ts b/src/content/components/date-components/RelativeDateField/index.ts
new file mode 100644
index 000000000000..899893745362
--- /dev/null
+++ b/src/content/components/date-components/RelativeDateField/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const relativeDateFieldConfig: Component = {
+    id: 'relative-date-field',
+    title: 'Relative Date Field',
+    isComingSoon: true,
+};
diff --git a/src/content/components/date-components/RelativeDatePicker/index.ts b/src/content/components/date-components/RelativeDatePicker/index.ts
new file mode 100644
index 000000000000..e98c82439ba0
--- /dev/null
+++ b/src/content/components/date-components/RelativeDatePicker/index.ts
@@ -0,0 +1,7 @@
+import {Component} from '../../types';
+
+export const relativeDatePickerConfig: Component = {
+    id: 'relative-date-picker',
+    title: 'Relative Date Picker',
+    isComingSoon: true,
+};
diff --git a/src/content/components/date-components/index.ts b/src/content/components/date-components/index.ts
new file mode 100644
index 000000000000..38aa91da045a
--- /dev/null
+++ b/src/content/components/date-components/index.ts
@@ -0,0 +1,30 @@
+import {sortBy} from 'lodash';
+
+import {getLibById} from '../../../utils';
+import {Component, Lib} from '../types';
+
+import {calendarConfig} from './Calendar';
+import {dateFieldConfig} from './DateField';
+import {datePickerConfig} from './DatePicker';
+import {rangeCalendarConfig} from './RangeCalendar';
+import {relativeDateFieldConfig} from './RelativeDateField';
+import {relativeDatePickerConfig} from './RelativeDatePicker';
+
+const {config} = getLibById('date-components');
+
+const components: Component[] = [
+    calendarConfig,
+    dateFieldConfig,
+    datePickerConfig,
+    rangeCalendarConfig,
+    relativeDateFieldConfig,
+    relativeDatePickerConfig,
+];
+
+export const dateComponents: Lib = {
+    id: config.id,
+    title: config.title,
+    primary: config.primary,
+    description: config.description,
+    components: sortBy(components, 'title'),
+};
diff --git a/src/content/components/index.ts b/src/content/components/index.ts
index 7bec08abe811..615bf2bdcc94 100644
--- a/src/content/components/index.ts
+++ b/src/content/components/index.ts
@@ -1,7 +1,7 @@
-// import {components} from './components';
-import {Lib} from './types';
+import {dateComponents} from './date-components';
+import type {Lib} from './types';
 import {uikit} from './uikit';
 
 export type {SandboxType, SandboxProps, Component} from './types';
 
-export const libs: Lib[] = [uikit /*, components*/];
+export const libs: Lib[] = [uikit, dateComponents];
diff --git a/src/types/common.ts b/src/types/common.ts
index 8e4d8cfaf645..d13d556732cc 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,4 +1,5 @@
 export enum Repos {
     Uikit = 'uikit',
     Components = 'components',
+    DateComponents = 'date-components',
 }