diff --git a/player/react/src/lib/components/index.ts b/player/react/src/lib/components/index.ts
index a94397b61..6966f954e 100644
--- a/player/react/src/lib/components/index.ts
+++ b/player/react/src/lib/components/index.ts
@@ -9,6 +9,7 @@ import * as column from './ui-column';
 import * as combobox from './ui-combobox';
 import * as contentSwitcher from './ui-content-switcher';
 import * as dropdown from './ui-dropdown';
+import * as datePicker from './ui-date-picker';
 import * as grid from './ui-grid';
 import * as numberinput from './ui-number-input';
 import * as radio from './ui-radio';
@@ -45,6 +46,7 @@ export const allComponents = {
 	contentSwitcher,
 	column,
 	dropdown,
+	datePicker,
 	grid,
 	loading,
 	inlineLoading,
diff --git a/player/react/src/lib/components/ui-date-picker.tsx b/player/react/src/lib/components/ui-date-picker.tsx
new file mode 100644
index 000000000..f722e13f7
--- /dev/null
+++ b/player/react/src/lib/components/ui-date-picker.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+	DatePicker,
+	DatePickerInput
+} from '@carbon/react';
+import { commonSlots, slotsDisabled } from '../common-slots';
+import { SendSignal, CssClasses } from '../types';
+import { stringToCssClassName } from '../utils';
+
+export interface DatePickerState {
+	type: string;
+	id: string;
+	placeholder?: string;
+	disabled?: boolean;
+	invalid?: boolean;
+	invalidText?: string;
+	rangeInvalidText?: string;
+	light?: boolean;
+	size?: string;
+	kind?: string;
+	dateFormat?: string;
+	value?: string;
+	rangeStartLabel?: string;
+	rangeEndLabel?: string;
+	rangePlaceholder?: string;
+	cssClasses?: CssClasses[];
+	codeContext: {
+		name: string;
+	};
+	style?: any;
+}
+
+export const type = 'date-picker';
+
+export const slots = {
+	...commonSlots,
+	...slotsDisabled,
+	dateFormat: 'string',
+	kind: 'string',
+	placeholder: 'string',
+	size: 'string',
+	invalidText: 'string',
+	rangeStartLabel: 'string',
+	rangeEndLabel: 'string',
+	rangePlaceholder: 'string',
+	rangeInvalidText: 'string',
+	value: 'string',
+	invalid: 'boolean',
+	setInvalid: (state: DatePickerState) => ({
+		...state,
+		invalid: true
+	}),
+	setValid: (state: DatePickerState) => ({
+		...state,
+		invalid: false
+	}),
+	toggleValid: (state: DatePickerState) => ({
+		...state,
+		invalid: !state.invalid
+	}),
+	light: 'boolean',
+	setLight: (state: DatePickerState) => ({
+		...state,
+		light: true
+	}),
+	setDark: (state: DatePickerState) => ({
+		...state,
+		light: false
+	}),
+	toggleLight: (state: DatePickerState) => ({
+		...state,
+		light: !state.light
+	})
+};
+
+export const signals = ['valueChange', 'click'];
+
+export const UIDatePicker = ({ state, sendSignal }: {
+	state: DatePickerState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+	sendSignal: SendSignal;
+}) => {
+	if (state.type !== 'date-picker') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	let cssClasses = state.cssClasses?.map((cc: any) => cc.id).join(' ') || '';
+
+	if (state.style) {
+		if (cssClasses.length > 0) {
+			cssClasses += ' ';
+		}
+		cssClasses += stringToCssClassName(state.codeContext.name);
+	}
+
+	return <DatePicker
+		className={cssClasses}
+		dateFormat={state.dateFormat}
+		datePickerType={state.kind}
+		value={state.value}
+		light={state.light}
+		onClick={() => sendSignal(state.id, 'click')}
+		onChange={(event: any) => {
+			sendSignal(state.id, 'valueChange', [event[0].toISOString()], { ...state, value: event[0].toISOString() });
+		}}>
+			<DatePickerInput
+				id={state.id}
+				placeholder={state.placeholder}
+				labelText={state.rangeStartLabel}
+				size={state.size}
+				disabled={state.disabled}
+				invalid={state.invalid}
+				invalidText={state.invalidText}/>
+			{
+				state.kind === 'range'
+				&& <DatePickerInput
+					id={`${state.id}-end`}
+					placeholder={state.placeholder}
+					labelText={state.rangePlaceholder}
+					size={state.size}
+					disabled={state.disabled}
+					invalid={state.invalid}
+					invalidText={state.rangeInvalidText} />
+			}
+		</DatePicker>;
+};
diff --git a/player/react/src/lib/utils.tsx b/player/react/src/lib/utils.tsx
index 7c335518a..ace85aafe 100644
--- a/player/react/src/lib/utils.tsx
+++ b/player/react/src/lib/utils.tsx
@@ -10,6 +10,7 @@ import { UICodeSnippet } from './components/ui-code-snippet';
 import { UIColumn } from './components/ui-column';
 import { UIComboBox } from './components/ui-combobox';
 import { UIContentSwitcher } from './components/ui-content-switcher';
+import { UIDatePicker } from './components/ui-date-picker';
 import { UIDropdown } from './components/ui-dropdown';
 import { UIExpandableTile } from './components/ui-expandable-tile';
 import { UIGrid } from './components/ui-grid';
@@ -238,6 +239,9 @@ export const renderComponents = (
 		case 'content-switcher':
 			return <UIContentSwitcher key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'date-picker':
+			return <UIDatePicker key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'dropdown':
 			return <UIDropdown key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
diff --git a/sdk/react/src/lib/assets/component-icons/date-picker.svg b/sdk/react/src/lib/assets/component-icons/date-picker.svg
new file mode 100644
index 000000000..f06ba1887
--- /dev/null
+++ b/sdk/react/src/lib/assets/component-icons/date-picker.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="89" height="39" viewBox="0 0 89 39">
+    <g id="Group_1" data-name="Group 1" transform="translate(-539 -508)">
+        <g id="label_text" data-name="label text" transform="translate(539 508)">
+        <rect id="skeleton" width="40" height="8" fill="#e8e8e8"/>
+        </g>
+        <g id="input_background" data-name="input background" transform="translate(539 523)">
+        <rect id="input" width="89" height="24" fill="#e8e8e8"/>
+        <rect id="border-bottom" width="89" height="1" transform="translate(0 23)" fill="#8d8d8d" opacity="0"/>
+        </g>
+        <g id="Planning_Time_calendar" data-name="Planning / Time / calendar" transform="translate(596 527)">
+        <rect id="base" width="16" height="16" fill="#fff" opacity="0"/>
+        <path id="Path_10134" data-name="Path 10134" d="M130-1941h-2v-1h-1v1h-4v-1h-1v1h-2a.945.945,0,0,0-1,1v10a.945.945,0,0,0,1,1h10a.945.945,0,0,0,1-1v-10A.945.945,0,0,0,130-1941Zm0,11H120v-7h10Zm0-8H120v-2h2v1h1v-1h4v1h1v-1h2Z" transform="translate(-109 1943)" fill="#161616" fill-rule="evenodd"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/sdk/react/src/lib/components/settings-context-pane.tsx b/sdk/react/src/lib/components/settings-context-pane.tsx
index c099bfa18..88b7bc0cd 100644
--- a/sdk/react/src/lib/components/settings-context-pane.tsx
+++ b/sdk/react/src/lib/components/settings-context-pane.tsx
@@ -237,7 +237,7 @@ export const SettingsContextPane = ({
 					</>
 				}
 				{
-					!selectedComponent && <>
+					!selectedComponent && <div className={cx(styleContextPaneStyle)}>
 						<Checkbox
 							id='setFragmentAsTemplate'
 							checked={fragment.labels && fragment.labels.includes('template')}
@@ -291,7 +291,7 @@ export const SettingsContextPane = ({
 							className={tooltipStyle}>
 							micro layout
 						</DefinitionTooltip>
-					</>
+					</div>
 				}
 				</div>
 			}
diff --git a/sdk/react/src/lib/fragment-components/a-date-picker.tsx b/sdk/react/src/lib/fragment-components/a-date-picker.tsx
new file mode 100644
index 000000000..b11f8c630
--- /dev/null
+++ b/sdk/react/src/lib/fragment-components/a-date-picker.tsx
@@ -0,0 +1,416 @@
+import React, { useState } from 'react';
+import {
+	DatePicker,
+	DatePickerInput,
+	Dropdown,
+	Checkbox,
+	TextInput
+} from '@carbon/react';
+import { AComponent, ComponentInfo } from './a-component';
+import image from './../assets/component-icons/date-picker.svg';
+import {
+	angularClassNamesFromComponentObj,
+	nameStringToVariableString,
+	reactClassNamesFromComponentObj
+} from '../helpers/tools';
+import { css, cx } from 'emotion';
+
+const preventCheckEventStyle = css`
+	pointer-events: none;
+`;
+
+const checkboxStyle = css`
+	padding-top: 0.5rem;
+`;
+
+export const ADatePickerSettingsUI = ({ selectedComponent, setComponent }: any) => {
+	const [showRangePlaceholder, setShowRangePlaceholder] = useState(false);
+	const [rangePlaceholder, setRangePlaceholder] = useState('Range placeholder');
+
+	const size = [
+		{ id: 'sm', text: 'Small' },
+		{ id: 'md', text: 'Medium' },
+		{ id: 'lg', text: 'Large' }
+	];
+
+	const datePickerType = [
+		{ id: 'simple', text: 'Simple' },
+		{ id: 'single', text: 'Single with calender' },
+		{ id: 'range', text: 'Range with calender' }
+	];
+
+	return <>
+		<Checkbox
+			labelText='Light'
+			id='light'
+			checked={selectedComponent.light}
+			onChange={(_: any) => setComponent({
+				...selectedComponent,
+				light: !selectedComponent.light
+			})} />
+		<Checkbox
+			labelText='Disabled'
+			id='disable'
+			checked={selectedComponent.disabled}
+			onChange={(_: any) => setComponent({
+				...selectedComponent,
+				disabled: !selectedComponent.disabled
+			})} />
+		<Dropdown
+			id='datepicker-variation'
+			label='Date picker type'
+			titleText='Date picker type'
+			items={datePickerType}
+			selectedItem={datePickerType.find(item => item.id === selectedComponent.kind)}
+			itemToString={(item: any) => (item ? item.text : '')}
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				kind: event.selectedItem.id,
+				rangeEndLabel: event.selectedItem.id === 'range' ? 'Range end' : undefined
+			})} />
+		{
+			(selectedComponent.kind === 'single' || selectedComponent.kind === 'range') &&
+			<TextInput
+				id='date-format'
+				value={selectedComponent.dateFormat}
+				labelText='Date format'
+				onChange={(event: any) => setComponent({
+					...selectedComponent,
+					dateFormat: event.currentTarget.value
+				})} />
+		}
+		<TextInput
+			id='placeholder'
+			value={selectedComponent.placeholder}
+			labelText='Placeholder'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				placeholder: event.currentTarget.value
+			})} />
+		{selectedComponent.kind === 'range' &&
+			<Checkbox
+				className={checkboxStyle}
+				labelText='Override range placeholder'
+				id='override-range-placeholder'
+				checked={showRangePlaceholder}
+				onChange={(_: any, { checked }: any) => {
+					setShowRangePlaceholder(checked);
+					setComponent({
+						...selectedComponent,
+						rangePlaceholder: checked ? rangePlaceholder : undefined
+					});
+				}} />
+		}
+		{
+			showRangePlaceholder
+			&& <TextInput
+				id='range-placeholder'
+				value={selectedComponent.rangePlaceholder}
+				labelText='Range placeholder'
+				onChange={(event: any) => {
+					setRangePlaceholder(event.currentTarget.value);
+					setComponent({
+						...selectedComponent,
+						rangePlaceholder: event.currentTarget.value
+					});
+				}} />
+		}
+		<Dropdown
+			id='size-select'
+			label='Size'
+			titleText='Size'
+			items={size}
+			selectedItem={size.find(item => item.id === selectedComponent.size)}
+			itemToString={(item: any) => (item ? item.text : '')}
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				size: event.selectedItem.id
+			})} />
+		<TextInput
+			id='range-start-label'
+			value={selectedComponent.rangeStartLabel}
+			labelText={selectedComponent.kind === 'range' ? 'Date picker range start label' : 'Date picker label'}
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				rangeStartLabel: event.currentTarget.value
+			})} />
+		{
+			selectedComponent.kind === 'range'
+			&& <TextInput
+				id='range-end-label'
+				value={selectedComponent.rangeEndLabel}
+				labelText='Date picker range end label'
+				onChange={(event: any) => setComponent({
+					...selectedComponent,
+					rangeEndLabel: event.currentTarget.value
+				})} />
+		}
+		<Checkbox
+			className={checkboxStyle}
+			labelText='Invalid'
+			id='invalid'
+			checked={selectedComponent.invalid}
+			onChange={(_: any) => setComponent({
+				...selectedComponent,
+				invalid: !selectedComponent.invalid
+			})} />
+		<TextInput
+			id='invalid-text'
+			value={selectedComponent.invalidText}
+			labelText='Invalid text'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				invalidText: event.currentTarget.value
+			})} />
+		{
+			selectedComponent.kind === 'range'
+			&& <TextInput
+				id='range-invalid-text'
+				value={selectedComponent.rangeInvalidText}
+				labelText='Date picker range invalid text'
+				onChange={(event: any) => setComponent({
+					...selectedComponent,
+					rangeInvalidText: event.currentTarget.value
+				})} />
+		}
+	</>;
+};
+
+export const ADatePickerCodeUI = ({ selectedComponent, setComponent }: any) => <TextInput
+	value={selectedComponent.codeContext?.name}
+	labelText='Input name'
+	onChange={(event: any) => setComponent({
+		...selectedComponent,
+		codeContext: {
+			...selectedComponent.codeContext,
+			name: event.currentTarget.value
+		}
+	})}
+/>;
+
+export const ADatePicker = ({
+	componentObj,
+	...rest
+}: any) => {
+	return (
+		<AComponent
+			componentObj={componentObj}
+			rejectDrop={true}
+			{...rest}>
+			{
+				<DatePicker
+					id={componentObj.id}
+					className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))}
+					dateFormat={componentObj.dateFormat}
+					datePickerType={componentObj.kind}
+					light={componentObj.light}>
+					<DatePickerInput
+						id={componentObj.id}
+						placeholder={componentObj.placeholder}
+						disabled={componentObj.disabled}
+						invalid={componentObj.invalid}
+						invalidText={componentObj.invalidText}
+						labelText={componentObj.rangeStartLabel}
+						size={componentObj.size} />
+					{
+						componentObj.kind === 'range'
+						&& <DatePickerInput
+							id={`${componentObj.id}-end`}
+							placeholder={componentObj.rangePlaceholder || componentObj.placeholder}
+							labelText={componentObj.rangeEndLabel}
+							size={componentObj.size}
+							disabled={componentObj.disabled}
+							invalid={componentObj.invalid}
+							invalidText={componentObj.rangeInvalidText} />
+					}
+				</DatePicker>
+			}
+		</AComponent>
+	);
+};
+
+export const componentInfo: ComponentInfo = {
+	component: ADatePicker,
+	settingsUI: ADatePickerSettingsUI,
+	codeUI: ADatePickerCodeUI,
+	keywords: ['datepicker', 'date', 'picker'],
+	name: 'Date Picker',
+	type: 'date-picker',
+	defaultComponentObj: {
+		type: 'date-picker',
+		rangeStartLabel: 'Label'
+	},
+	image,
+	codeExport: {
+		angular: {
+			latest: {
+				inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: (string | Date)[]
+					= ${json.value ? json.value : "['']"};
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}Theme: "light" | "dark" = "${json.light ? 'light' : 'dark'}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${!!json.disabled};
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${!!json.invalid};
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}Size: "sm" | "md" | "lg" = "${json.size || 'md'}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`,
+				outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`,
+				imports: ['DatePickerModule'],
+				code: ({ json }) => {
+					return `<cds-date-picker
+						${angularClassNamesFromComponentObj(json)}
+						[theme]="${nameStringToVariableString(json.codeContext?.name)}Theme"
+						[disabled]="${nameStringToVariableString(json.codeContext?.name)}IsDisabled"
+						[invalid]="${nameStringToVariableString(json.codeContext?.name)}IsInvalid"
+						[label]="${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel"
+						[invalidText]="${nameStringToVariableString(json.codeContext?.name)}InvalidText"
+						(valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event)"
+						[value]="${nameStringToVariableString(json.codeContext?.name)}Value"
+						[placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder"
+						[size]="${nameStringToVariableString(json.codeContext?.name)}Size"
+						${
+							!json.kind || json.kind === 'simple'
+								? `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"`
+								: `[range]="true" [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"`
+						}>
+						</cds-date-picker>
+					`;
+				}
+			},
+			v10: {
+				inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Value: (string | Date)[]
+					= ${json.value ? json.value : "['']"};
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}Theme: "light" | "dark" = "${json.light ? 'light' : 'dark'}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel = "${json.rangeStartLabel}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel = "${json.rangeEndLabel ?? ''}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}IsDisabled = ${!!json.disabled};
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}IsInvalid = ${!!json.invalid};
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}InvalidText = "${json.invalidText ?? ''}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}Placeholder = "${json.placeholder ?? 'mm/dd/yyyy'}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}RangePlaceholder = "${json.rangePlaceholder ?? ''}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}Size: "sm" | "md" | "lg" = "${json.size || 'md'}";
+					@Input() ${nameStringToVariableString(json.codeContext?.name)}DateFormat = "${json.dateFormat || 'm/d/Y'}";`,
+				outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`,
+				imports: ['DatePickerModule'],
+				code: ({ json }) => {
+					return `<cds-date-picker
+						${angularClassNamesFromComponentObj(json)}
+						[theme]="${nameStringToVariableString(json.codeContext?.name)}Theme"
+						[disabled]="${nameStringToVariableString(json.codeContext?.name)}IsDisabled"
+						[invalid]="${nameStringToVariableString(json.codeContext?.name)}IsInvalid"
+						[label]="${nameStringToVariableString(json.codeContext?.name)}RangeStartLabel"
+						[invalidText]="${nameStringToVariableString(json.codeContext?.name)}InvalidText"
+						(valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event)"
+						[value]="${nameStringToVariableString(json.codeContext?.name)}Value"
+						[placeholder]="${nameStringToVariableString(json.codeContext?.name)}Placeholder"
+						[size]="${nameStringToVariableString(json.codeContext?.name)}Size"
+						${
+							!json.kind || json.kind === 'simple'
+								? `[dateFormat]="${nameStringToVariableString(json.codeContext?.name)}DateFormat"`
+								: `[range]="true" [rangeLabel]="${nameStringToVariableString(json.codeContext?.name)}RangeEndLabel"`
+						}>
+						</cds-date-picker>
+					`;
+				}
+			}
+		},
+		react: {
+			latest: {
+				imports: ['DatePicker', 'DatePickerInput'],
+				code: ({ json }) => {
+					return `<DatePicker
+					${reactClassNamesFromComponentObj(json)}
+					${json.kind ? `datePickerType="${json.kind}"` : ''}
+					${json.dateFormat ? `dateFormat="${json.dateFormat}"` : ''}
+					${json.light ? 'light={true}' : ''}
+					${json.kind !== 'simple' ? `onChange={(dates) => handleInputChange({
+						target: {
+							name: "${json.codeContext?.name}",
+							value: dates
+						}
+					})}`: ''}>
+					<DatePickerInput
+						id="${nameStringToVariableString(json.codeContext?.name)}"
+						${json.placeholder ? `placeholder='${json.placeholder}'` : ''}
+						${json.rangeStartLabel ? `labelText='${json.rangeStartLabel}'` : ''}
+						${json.disabled ? `disabled={${json.disabled}}` : ''}
+						${json.invalid ? `invalid={${json.invalid}}` : ''}
+						${json.invalidText ? `invalidText='${json.invalidText}'` : ''}
+						${json.size && json.size !== 'md' ? `size="${json.size}"` : ''}
+						${
+							json.kind === 'simple'
+								? `onChange={(dates) => handleInputChange({
+									target: {
+										name: "${json.codeContext?.name}",
+										value: dates
+									}})}`
+								: ''
+						}
+					/>
+					${
+						json.kind === 'range'
+							? `<DatePickerInput
+								id="${nameStringToVariableString(json.codeContext?.name) + '-end'}"
+								${json.rangePlaceholder ? `placeholder="${json.rangePlaceholder}"` : `placeholder="${json.placeholder}"`}
+								${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''}
+								${json.disabled ? `disabled={${json.disabled}}` : ''}
+								${json.invalid ? `invalid={${json.invalid}}` : ''}
+								${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''}
+								${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />`
+							: ''
+					}
+					</DatePicker>`;
+				}
+			},
+			v10: {
+				imports: ['DatePicker', 'DatePickerInput'],
+				code: ({ json }) => {
+					return `<DatePicker
+					${reactClassNamesFromComponentObj(json)}
+					${json.kind ? `datePickerType="${json.kind}"` : ''}
+					${json.dateFormat ? `dateFormat="${json.dateFormat}"` : ''}
+					${json.light ? 'light={true}' : ''}
+					${json.kind !== 'simple' ? `onChange={(dates) => handleInputChange({
+						target: {
+							name: "${json.codeContext?.name}",
+							value: dates
+						}
+					})}`: ''}>
+					<DatePickerInput
+						id="${nameStringToVariableString(json.codeContext?.name)}"
+						${json.placeholder ? `placeholder='${json.placeholder}'` : ''}
+						${json.rangeStartLabel ? `labelText='${json.rangeStartLabel}'` : ''}
+						${json.disabled ? `disabled={${json.disabled}}` : ''}
+						${json.invalid ? `invalid={${json.invalid}}` : ''}
+						${json.invalidText ? `invalidText='${json.invalidText}'` : ''}
+						${json.size && json.size !== 'md' ? `size="${json.size}"` : ''}
+						${
+							json.kind === 'simple'
+								? `onChange={(dates) => handleInputChange({
+									target: {
+										name: "${json.codeContext?.name}",
+										value: dates
+									}})}`
+								: ''
+						}
+					/>
+					${
+						json.kind === 'range'
+							? `<DatePickerInput
+								id="${nameStringToVariableString(json.codeContext?.name) + '-end'}"
+								${json.rangePlaceholder ? `placeholder="${json.rangePlaceholder}"` : `placeholder="${json.placeholder}"`}
+								${json.rangeEndLabel ? `labelText='${json.rangeEndLabel}'` : ''}
+								${json.disabled ? `disabled={${json.disabled}}` : ''}
+								${json.invalid ? `invalid={${json.invalid}}` : ''}
+								${json.invalidText ? `invalidText='${json.rangeInvalidText}'` : ''}
+								${json.size && json.size !== 'md' ? `size="${json.size}"` : ''} />`
+							: ''
+					}
+					</DatePicker>`;
+				}
+			}
+		}
+	}
+};
diff --git a/sdk/react/src/lib/fragment-components/index.ts b/sdk/react/src/lib/fragment-components/index.ts
index e4308a3fe..74d120da8 100644
--- a/sdk/react/src/lib/fragment-components/index.ts
+++ b/sdk/react/src/lib/fragment-components/index.ts
@@ -8,6 +8,7 @@ import * as codeSnippet from './a-code-snippet';
 import * as column from './a-column';
 import * as combobox from './a-combobox';
 import * as contentSwitcher from './a-content-switcher';
+import * as datepicker from './a-date-picker';
 import * as dropdown from './a-dropdown';
 import * as fragment from './a-fragment';
 import * as grid from './a-grid';
@@ -45,6 +46,7 @@ export { ACheckbox, ACheckboxSettingsUI, ACheckboxCodeUI } from './a-checkbox';
 export { AColumn, AColumnCodeUI, AColumnSettingsUI } from './a-column';
 export { AComboBox, AComboBoxSettingsUI, AComboBoxCodeUI } from './a-combobox';
 export { AContentSwitcher, AContentSwitcherSettingsUI, AContentSwitcherCodeUI } from './a-content-switcher';
+export { ADatePicker, ADatePickerSettingsUI, ADatePickerCodeUI } from './a-date-picker';
 export { ADropdown, ADropdownSettingsUI, ADropdownCodeUI } from './a-dropdown';
 export * from './a-component';
 export { AFragment, AFragmentSettingsUI, AFragmentCodeUI } from './a-fragment';
@@ -85,6 +87,7 @@ export const allComponents = {
 	combobox,
 	contentSwitcher,
 	column,
+	datepicker,
 	dropdown,
 	fragment,
 	grid,