diff --git a/docs-site/package.json b/docs-site/package.json
index 72a9775c11..a8e2b65af2 100644
--- a/docs-site/package.json
+++ b/docs-site/package.json
@@ -16,14 +16,18 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/lodash": "^4.17.11",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.0",
     "eslint-plugin-react": "^7.37.5",
@@ -31,6 +35,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "sass": "^1.86.3",
+    "typescript": "^5.3.3",
     "vite": "^6.3.2"
   },
   "packageManager": "yarn@4.6.0"
diff --git a/docs-site/src/components/Example/index.jsx b/docs-site/src/components/Example/index.tsx
similarity index 61%
rename from docs-site/src/components/Example/index.jsx
rename to docs-site/src/components/Example/index.tsx
index f45a158f6c..74529ff556 100644
--- a/docs-site/src/components/Example/index.jsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -12,16 +12,44 @@ import slugify from "slugify";
 import range from "lodash/range";
 import { themes } from "prism-react-renderer";
 import editIcon from "./edit-regular.svg";
+import { IExampleConfig } from "../../types";
+
+type TState = {
+  activeTab: "js" | "ts";
+};
+
+type TProps = {
+  example: IExampleConfig;
+};
+
+export default class CodeExampleComponent extends React.Component<
+  TProps,
+  TState
+> {
+  state: TState = {
+    activeTab: "js",
+  };
 
-export default class CodeExampleComponent extends React.Component {
   componentDidMount() {
     registerLocale("fi", fi);
     registerLocale("pt-BR", ptBR);
     registerLocale("en-GB", enGB);
   }
 
+  handleTabChange = (tab: TState["activeTab"]) => {
+    this.setState({ activeTab: tab });
+  };
+
   render() {
-    const { title, description, component } = this.props.example;
+    const { title, description, component, componentTS } = this.props.example;
+    const { activeTab } = this.state;
+
+    const jsCode = component.trim();
+    const tsCode = componentTS?.trim();
+
+    const code = activeTab === "js" ? jsCode : tsCode;
+    const isTS = activeTab === "ts";
+
     return (
       <div
         id={`example-${slugify(title, { lower: true })}`}
@@ -29,9 +57,25 @@ export default class CodeExampleComponent extends React.Component {
       >
         <h2 className="example__heading">{title}</h2>
         {description && <p>{description}</p>}
+        <div className="example__tabs">
+          <button
+            className={`example__tab ${activeTab === "js" ? "active" : ""}`}
+            onClick={() => this.handleTabChange("js")}
+          >
+            JavaScript
+          </button>
+          {tsCode && (
+            <button
+              className={`example__tab ${activeTab === "ts" ? "active" : ""}`}
+              onClick={() => this.handleTabChange("ts")}
+            >
+              TypeScript
+            </button>
+          )}
+        </div>
         <div className="row">
           <LiveProvider
-            code={component.trim()}
+            code={code}
             scope={{
               // NB any globals added here should also be referenced in ../../examples/.eslintrc
               useState,
@@ -43,6 +87,8 @@ export default class CodeExampleComponent extends React.Component {
               forwardRef,
             }}
             theme={themes.github}
+            noInline={isTS}
+            language={isTS ? "tsx" : "jsx"}
           >
             <pre className="example__code">
               <img
diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx
new file mode 100644
index 0000000000..95fa47e3ab
--- /dev/null
+++ b/docs-site/src/components/Examples/config.tsx
@@ -0,0 +1,772 @@
+import { IExampleConfig } from "../../types";
+
+import Default from "../../examples/js/default?raw";
+import NoAnchorArrow from "../../examples/js/noAnchorArrow?raw";
+import ShowTime from "../../examples/js/showTime?raw";
+import ShowTimeOnly from "../../examples/js/showTimeOnly?raw";
+import HideTimeCaption from "../../examples/js/hideTimeCaption?raw";
+import ExcludeTimes from "../../examples/js/excludeTimes?raw";
+import IncludeTimes from "../../examples/js/includeTimes?raw";
+import InjectTimes from "../../examples/js/injectTimes?raw";
+import FilterTimes from "../../examples/js/filterTimes?raw";
+import ExcludeTimePeriod from "../../examples/js/excludeTimePeriod?raw";
+import CustomDateFormat from "../../examples/js/customDateFormat?raw";
+import CustomClassName from "../../examples/js/customClassName?raw";
+import CustomCalendarClassName from "../../examples/js/customCalendarClassName?raw";
+import CustomDayClassName from "../../examples/js/customDayClassName?raw";
+import CustomTimeClassName from "../../examples/js/customTimeClassName?raw";
+import Today from "../../examples/js/today?raw";
+import PlaceholderText from "../../examples/js/placeholderText?raw";
+import SpecificDateRange from "../../examples/js/specificDateRange?raw";
+import MinDate from "../../examples/js/minDate?raw";
+import MaxDate from "../../examples/js/maxDate?raw";
+import DateRangeWithShowDisabledNavigation from "../../examples/js/dateRangeWithShowDisabledNavigation?raw";
+import Locale from "../../examples/js/locale?raw";
+import LocaleWithTime from "../../examples/js/localeWithTime?raw";
+import LocaleWithoutGlobalVariable from "../../examples/js/localeWithoutGlobalVariable?raw";
+import ExcludeDates from "../../examples/js/excludeDates?raw";
+import ExcludedWithMessage from "../../examples/js/excludeDatesWithMessage?raw";
+import ExcludeDateIntervals from "../../examples/js/excludeDateIntervals?raw";
+import ExcludeDatesMonthPicker from "../../examples/js/excludeDatesMonthPicker?raw";
+import ExcludeDatesRangeMonthPicker from "../../examples/js/excludeDatesRangeMonthPicker?raw";
+import HighlightDates from "../../examples/js/highlightDates?raw";
+import HolidayDates from "../../examples/js/holidayDates?raw";
+import HighlightDatesRanges from "../../examples/js/highlightDatesRanges?raw";
+import IncludeDates from "../../examples/js/includeDates?raw";
+import IncludeDateIntervals from "../../examples/js/includeDateIntervals?raw";
+import IncludeDatesMonthPicker from "../../examples/js/includeDatesMonthPicker?raw";
+import FilterDates from "../../examples/js/filterDates?raw";
+import DateRange from "../../examples/js/dateRange?raw";
+import DateRangeInputWithClearButton from "../../examples/js/dateRangeInputWithClearButton?raw";
+import DateRangeWithPortal from "../../examples/js/dateRangeWithPortal?raw";
+import Disabled from "../../examples/js/disabled?raw";
+import DisabledKeyboardNavigation from "../../examples/js/disabledKeyboardNavigation?raw";
+import ReadOnly from "../../examples/js/readOnly?raw";
+import ClearInput from "../../examples/js/clearInput?raw";
+import OnBlurCallbacks from "../../examples/js/onBlurCallbacks?raw";
+import ConfigureFloatingUI from "../../examples/js/configureFloatingUI?raw";
+import Portal from "../../examples/js/portal?raw";
+import PortalById from "../../examples/js/portalById?raw";
+import WithPortalById from "../../examples/js/withPortalById?raw";
+import TabIndex from "../../examples/js/tabIndex?raw";
+import YearDropdown from "../../examples/js/yearDropdown?raw";
+import YearItemNumber from "../../examples/js/yearItemNumber?raw";
+import MonthDropdown from "../../examples/js/monthDropdown?raw";
+import MonthDropdownShort from "../../examples/js/monthDropdownShort?raw";
+import MonthYearDropdown from "../../examples/js/monthYearDropdown?raw";
+import YearSelectDropdown from "../../examples/js/yearSelectDropdown?raw";
+import Inline from "../../examples/js/inline?raw";
+import InlineVisible from "../../examples/js/inlineVisible?raw";
+import OpenToDate from "../../examples/js/openToDate?raw";
+import FixedCalendar from "../../examples/js/fixedCalendar?raw";
+import WeekNumbers from "../../examples/js/weekNumbers?raw";
+import CustomInput from "../../examples/js/customInput?raw";
+import MultiMonth from "../../examples/js/multiMonth?raw";
+import MultiMonthPrevious from "../../examples/js/multiMonthPrevious?raw";
+import MultiMonthDropdown from "../../examples/js/multiMonthDropdown?raw";
+import MultiMonthInline from "../../examples/js/multiMonthInline?raw";
+import Children from "../../examples/js/children?raw";
+import CalendarContainer from "../../examples/js/calendarContainer?raw";
+import RawChange from "../../examples/js/rawChange?raw";
+import DontCloseOnSelect from "../../examples/js/dontCloseOnSelect?raw";
+import RenderCustomHeader from "../../examples/js/renderCustomHeader?raw";
+import RenderCustomHeaderTwoMonths from "../../examples/js/renderCustomHeaderTwoMonths?raw";
+import RenderCustomDay from "../../examples/js/renderCustomDay?raw";
+import RenderCustomMonth from "../../examples/js/renderCustomMonth?raw";
+import RenderCustomQuarter from "../../examples/js/renderCustomQuarter?raw";
+import RenderCustomYear from "../../examples/js/renderCustomYear?raw";
+import TimeInput from "../../examples/js/timeInput?raw";
+import StrictParsing from "../../examples/js/strictParsing?raw";
+import MonthPicker from "../../examples/js/monthPicker?raw";
+import WeekPicker from "../../examples/js/weekPicker?raw";
+import ExcludeWeeks from "../../examples/js/excludeWeeks?raw";
+import monthPickerFullName from "../../examples/js/monthPickerFullName?raw";
+import monthPickerTwoColumns from "../../examples/js/monthPickerTwoColumns?raw";
+import monthPickerFourColumns from "../../examples/js/monthPickerFourColumns?raw";
+import RangeMonthPicker from "../../examples/js/rangeMonthPicker?raw";
+import RangeMonthPickerSelectsRange from "../../examples/js/rangeMonthPickerSelectsRange?raw";
+import QuarterPicker from "../../examples/js/quarterPicker?raw";
+import RangeQuarterPicker from "../../examples/js/rangeQuarterPicker?raw";
+import RangeQuarterPickerSelectsRange from "../../examples/js/rangeQuarterPickerSelectsRange?raw";
+import YearPicker from "../../examples/js/yearPicker?raw";
+import RangeYearPicker from "../../examples/js/rangeYearPicker?raw";
+import RangeYearPickerSelectsRange from "../../examples/js/rangeYearPickerSelectsRange?raw";
+import OnCalendarChangeStateCallbacks from "../../examples/js/onCalendarOpenStateCallbacks?raw";
+import CustomTimeInput from "../../examples/js/customTimeInput?raw";
+import CloseOnScroll from "../../examples/js/closeOnScroll?raw";
+import CloseOnScrollCallback from "../../examples/js/closeOnScrollCallback?raw";
+import SelectsRange from "../../examples/js/selectsRange?raw";
+import selectsRangeWithDisabledDates from "../../examples/js/selectsRangeWithDisabledDates?raw";
+import CalendarStartDay from "../../examples/js/calendarStartDay?raw";
+import ExternalForm from "../../examples/js/externalForm?raw";
+import CalendarIcon from "../../examples/js/calendarIcon?raw";
+import SelectsMultiple from "../../examples/js/selectsMultiple?raw";
+import SelectsMultipleMonths from "../../examples/js/selectsMultipleMonths?raw";
+import CalendarIconExternal from "../../examples/js/calendarIconExternal?raw";
+import CalendarIconSvgIcon from "../../examples/js/calendarIconSvgIcon?raw";
+import ToggleCalendarOnIconClick from "../../examples/js/toggleCalendarOnIconClick?raw";
+import RangeSwapRange from "../../examples/js/rangeSwapRange?raw";
+
+// TS Examples
+import {
+  defaultTS,
+  calendarContainerTS,
+  calendarIconTS,
+  calendarIconSvgIconTS,
+  calendarIconExternalTS,
+  calendarStartDayTS,
+  onCalendarOpenStateCallbacksTS,
+  toggleCalendarOnIconClickTS,
+  childrenTS,
+  clearInputTS,
+  closeOnScrollTS,
+  closeOnScrollCallbackTS,
+  configureFloatingUIS,
+  customInputTS,
+  renderCustomHeaderTS,
+  renderCustomHeaderTwoMonthsTS,
+  renderCustomDayTS,
+  renderCustomMonthTS,
+  renderCustomQuarterTS,
+  renderCustomYearTS,
+  customCalendarClassNameTS,
+  customClassNameTS,
+  customDayClassNameTS,
+  customDateFormatTS,
+  customTimeClassNameTS,
+  customTimeInputTS,
+  dateRangeTS,
+  selectsRangeTS,
+  selectsRangeWithDisabledDatesTS,
+  dateRangeWithShowDisabledNavigationTS,
+  dateRangeInputWithClearButtonTS,
+  dateRangeWithPortalTS,
+  disabledTS,
+  disabledKeyboardNavigationTS,
+  weekNumbersTS,
+  dontCloseOnSelectTS,
+  excludeDatesTS,
+  excludeDatesWithMessageTS,
+  excludeDateIntervalsTS,
+  excludeDatesMonthPickerTS,
+  excludeDatesRangeMonthPickerTS,
+  excludeTimesTS,
+  filterDatesTS,
+  filterTimesTS,
+  fixedCalendarTS,
+  rawChangeTS,
+  highlightDatesTS,
+  highlightDatesRangesTS,
+  holidayDatesTS,
+  includeDatesTS,
+  includeDateIntervalsTS,
+  includeDatesMonthPickerTS,
+  includeTimesTS,
+  injectTimesTS,
+  inlineTS,
+  inlineVisibleTS,
+  timeInputTS,
+  localeTS,
+  localeWithTimeTS,
+  localeWithoutGlobalVariableTS,
+  maxDateTS,
+  minDateTS,
+  monthPickerTS,
+  monthPickerFullNameTS,
+  monthPickerTwoColumnsTS,
+  monthPickerFourColumnsTS,
+  monthDropdownTS,
+  monthDropdownShortTS,
+  monthYearDropdownTS,
+  multiMonthTS,
+  multiMonthDropdownTS,
+  multiMonthInlineTS,
+  noAnchorArrowTS,
+  onBlurCallbacksTS,
+  openToDateTS,
+  placeholderTextTS,
+  portalTS,
+  portalByIdTS,
+  withPortalByIdTS,
+  quarterPickerTS,
+  rangeMonthPickerTS,
+  rangeMonthPickerSelectsRangeTS,
+  rangeQuarterPickerTS,
+  rangeQuarterPickerSelectsRangeTS,
+  rangeSwapRangeTS,
+  readOnlyTS,
+  showTimeTS,
+  showTimeOnlyTS,
+  hideTimeCaptionTS,
+  multiMonthPreviousTS,
+  specificDateRangeTS,
+  excludeTimePeriodTS,
+  selectsMultipleTS,
+  selectsMultipleMonthsTS,
+  strictParsingTS,
+  tabIndexTS,
+  todayTS,
+  yearPickerTS,
+  rangeYearPickerTS,
+  rangeYearPickerSelectsRangeTS,
+  yearDropdownTS,
+  yearSelectDropdownTS,
+  yearItemNumberTS,
+  weekPickerTS,
+  excludeWeeksTS,
+  externalFormTS,
+} from "../../examples/ts";
+
+export const EXAMPLE_CONFIG: IExampleConfig[] = [
+  {
+    title: "Default",
+    component: Default,
+    componentTS: defaultTS,
+  },
+  {
+    title: "Calendar Icon",
+    component: CalendarIcon,
+    componentTS: calendarIconTS,
+  },
+  {
+    title: "Calendar Icon using React Svg Component",
+    component: CalendarIconSvgIcon,
+    componentTS: calendarIconSvgIconTS,
+  },
+  {
+    title: "Calendar Icon using External Lib",
+    component: CalendarIconExternal,
+    componentTS: calendarIconExternalTS,
+  },
+  {
+    title: "Toggle Calendar open status on click of the calendar icon",
+    component: ToggleCalendarOnIconClick,
+    componentTS: toggleCalendarOnIconClickTS,
+  },
+  {
+    title: "Calendar container",
+    component: CalendarContainer,
+    componentTS: calendarContainerTS,
+  },
+  {
+    title: "Calendar open state callbacks",
+    component: OnCalendarChangeStateCallbacks,
+    componentTS: onCalendarOpenStateCallbacksTS,
+  },
+  {
+    title: "Children",
+    component: Children,
+    componentTS: childrenTS,
+  },
+  {
+    title: "Clear datepicker input",
+    component: ClearInput,
+    componentTS: clearInputTS,
+  },
+  {
+    title: "Close on scroll",
+    component: CloseOnScroll,
+    componentTS: closeOnScrollTS,
+  },
+  {
+    title: "Close on scroll callback",
+    component: CloseOnScrollCallback,
+    componentTS: closeOnScrollCallbackTS,
+  },
+  {
+    title: "Configure Floating UI Properties",
+    component: ConfigureFloatingUI,
+    description: (
+      <div>
+        Full docs for the underlying library that manages the overlay used can
+        be found at{" "}
+        <a
+          href="https://floating-ui.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          floating-ui.com
+        </a>
+      </div>
+    ),
+    componentTS: configureFloatingUIS,
+  },
+  {
+    title: "Custom input",
+    component: CustomInput,
+    componentTS: customInputTS,
+  },
+  {
+    title: "Custom header",
+    component: RenderCustomHeader,
+    componentTS: renderCustomHeaderTS,
+  },
+  {
+    title: "Custom header with two months displayed",
+    component: RenderCustomHeaderTwoMonths,
+    componentTS: renderCustomHeaderTwoMonthsTS,
+  },
+  {
+    title: "Custom Day",
+    component: RenderCustomDay,
+    componentTS: renderCustomDayTS,
+  },
+  {
+    title: "Custom Month",
+    component: RenderCustomMonth,
+    componentTS: renderCustomMonthTS,
+  },
+  {
+    title: "Custom Quarter",
+    component: RenderCustomQuarter,
+    componentTS: renderCustomQuarterTS,
+  },
+  {
+    title: "Custom Year",
+    component: RenderCustomYear,
+    componentTS: renderCustomYearTS,
+  },
+  {
+    title: "Custom calendar class name",
+    component: CustomCalendarClassName,
+    componentTS: customCalendarClassNameTS,
+  },
+  {
+    title: "Custom class name",
+    component: CustomClassName,
+    componentTS: customClassNameTS,
+  },
+  {
+    title: "Custom day class name",
+    component: CustomDayClassName,
+    componentTS: customDayClassNameTS,
+  },
+  {
+    title: "Custom date format",
+    component: CustomDateFormat,
+    componentTS: customDateFormatTS,
+  },
+  {
+    title: "Custom time class name",
+    component: CustomTimeClassName,
+    componentTS: customTimeClassNameTS,
+  },
+  {
+    title: "Custom time input",
+    component: CustomTimeInput,
+    componentTS: customTimeInputTS,
+  },
+  {
+    title: "Date Range",
+    component: DateRange,
+    componentTS: dateRangeTS,
+  },
+  {
+    title: "Date range for one datepicker",
+    component: SelectsRange,
+    componentTS: selectsRangeTS,
+  },
+  {
+    title: "Date range for one datepicker with disabled dates highlighted",
+    component: selectsRangeWithDisabledDates,
+    componentTS: selectsRangeWithDisabledDatesTS,
+  },
+  {
+    title: "Date Range with disabled navigation shown",
+    component: DateRangeWithShowDisabledNavigation,
+    componentTS: dateRangeWithShowDisabledNavigationTS,
+  },
+  {
+    title: "Date Range using input with clear button",
+    component: DateRangeInputWithClearButton,
+    componentTS: dateRangeInputWithClearButtonTS,
+  },
+  {
+    title: "Date Range with Portal",
+    component: DateRangeWithPortal,
+    componentTS: dateRangeWithPortalTS,
+  },
+  {
+    title: "Disable datepicker",
+    component: Disabled,
+    componentTS: disabledTS,
+  },
+  {
+    title: "Disable keyboard navigation",
+    component: DisabledKeyboardNavigation,
+    componentTS: disabledKeyboardNavigationTS,
+  },
+  {
+    title: "Display Week Numbers",
+    component: WeekNumbers,
+    componentTS: weekNumbersTS,
+  },
+  {
+    title: "Don't hide calendar on date selection",
+    component: DontCloseOnSelect,
+    componentTS: dontCloseOnSelectTS,
+  },
+  {
+    title: "Exclude dates",
+    component: ExcludeDates,
+    componentTS: excludeDatesTS,
+  },
+  {
+    title: "Exclude dates with message",
+    component: ExcludedWithMessage,
+    componentTS: excludeDatesWithMessageTS,
+  },
+  {
+    title: "Exclude date intervals",
+    component: ExcludeDateIntervals,
+    componentTS: excludeDateIntervalsTS,
+  },
+  {
+    title: "Exclude Months in Month Picker",
+    component: ExcludeDatesMonthPicker,
+    componentTS: excludeDatesMonthPickerTS,
+  },
+  {
+    title: "Exclude Months in Range Month Picker",
+    component: ExcludeDatesRangeMonthPicker,
+    componentTS: excludeDatesRangeMonthPickerTS,
+  },
+  {
+    title: "Exclude Times",
+    component: ExcludeTimes,
+    componentTS: excludeTimesTS,
+  },
+  {
+    title: "Filter dates",
+    component: FilterDates,
+    componentTS: filterDatesTS,
+  },
+  {
+    title: "Filter times",
+    component: FilterTimes,
+    componentTS: filterTimesTS,
+  },
+  {
+    title: "Fixed height of Calendar",
+    component: FixedCalendar,
+    componentTS: fixedCalendarTS,
+  },
+  {
+    title: "Get raw input value on change",
+    component: RawChange,
+    componentTS: rawChangeTS,
+  },
+  {
+    title: "Highlight dates",
+    component: HighlightDates,
+    componentTS: highlightDatesTS,
+  },
+  {
+    title: "Highlight dates with custom class names and ranges",
+    component: HighlightDatesRanges,
+    componentTS: highlightDatesRangesTS,
+  },
+  {
+    title: "Holiday dates",
+    component: HolidayDates,
+    componentTS: holidayDatesTS,
+  },
+  {
+    title: "Include dates",
+    component: IncludeDates,
+    componentTS: includeDatesTS,
+  },
+  {
+    title: "Include date intervals",
+    component: IncludeDateIntervals,
+    componentTS: includeDateIntervalsTS,
+  },
+  {
+    title: "Include Months in Month Picker",
+    component: IncludeDatesMonthPicker,
+    componentTS: includeDatesMonthPickerTS,
+  },
+  {
+    title: "Include Times",
+    component: IncludeTimes,
+    componentTS: includeTimesTS,
+  },
+  {
+    title: "Inject Specific Times",
+    component: InjectTimes,
+    componentTS: injectTimesTS,
+  },
+  {
+    title: "Inline version",
+    component: Inline,
+    componentTS: inlineTS,
+  },
+  {
+    title: "Button to show Inline version",
+    component: InlineVisible,
+    componentTS: inlineVisibleTS,
+  },
+  {
+    title: "Input time",
+    component: TimeInput,
+    componentTS: timeInputTS,
+  },
+  {
+    title: "Locale",
+    component: Locale,
+    componentTS: localeTS,
+  },
+  {
+    title: "Locale with time",
+    component: LocaleWithTime,
+    componentTS: localeWithTimeTS,
+  },
+  {
+    title: "Locale without global variables",
+    component: LocaleWithoutGlobalVariable,
+    componentTS: localeWithoutGlobalVariableTS,
+  },
+  {
+    title: "Min date",
+    component: MinDate,
+    componentTS: minDateTS,
+  },
+  {
+    title: "Max date",
+    component: MaxDate,
+    componentTS: maxDateTS,
+  },
+  {
+    title: "Month Picker",
+    component: MonthPicker,
+    componentTS: monthPickerTS,
+  },
+  {
+    title: "Month Picker with Full Name",
+    component: monthPickerFullName,
+    componentTS: monthPickerFullNameTS,
+  },
+  {
+    title: "Month Picker Two Columns Layout",
+    component: monthPickerTwoColumns,
+    componentTS: monthPickerTwoColumnsTS,
+  },
+  {
+    title: "Month Picker Four Columns Layout",
+    component: monthPickerFourColumns,
+    componentTS: monthPickerFourColumnsTS,
+  },
+  {
+    title: "Month dropdown",
+    component: MonthDropdown,
+    componentTS: monthDropdownTS,
+  },
+  {
+    title: "Month dropdown short month",
+    component: MonthDropdownShort,
+    componentTS: monthDropdownShortTS,
+  },
+  {
+    title: "MonthYear dropdown",
+    component: MonthYearDropdown,
+    componentTS: monthYearDropdownTS,
+  },
+  {
+    title: "Multiple months",
+    component: MultiMonth,
+    componentTS: multiMonthTS,
+  },
+  {
+    title: "Multiple months with year dropdown",
+    component: MultiMonthDropdown,
+    componentTS: multiMonthDropdownTS,
+  },
+  {
+    title: "Multiple months inline",
+    component: MultiMonthInline,
+    componentTS: multiMonthInlineTS,
+  },
+  {
+    title: "No Anchor Arrow",
+    component: NoAnchorArrow,
+    componentTS: noAnchorArrowTS,
+  },
+  {
+    title: "onBlur callbacks in console",
+    component: OnBlurCallbacks,
+    componentTS: onBlurCallbacksTS,
+  },
+  {
+    title: "Open to date",
+    component: OpenToDate,
+    componentTS: openToDateTS,
+  },
+  {
+    title: "Placeholder text",
+    component: PlaceholderText,
+    componentTS: placeholderTextTS,
+  },
+  {
+    title: "Portal version",
+    component: Portal,
+    componentTS: portalTS,
+  },
+  {
+    title: "Portal by id",
+    description:
+      "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
+    component: PortalById,
+    componentTS: portalByIdTS,
+  },
+  {
+    title: "Portal version with portal by id",
+    description:
+      "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
+    component: WithPortalById,
+    componentTS: withPortalByIdTS,
+  },
+  {
+    title: "Quarter Picker",
+    component: QuarterPicker,
+    componentTS: quarterPickerTS,
+  },
+  {
+    title: "Range Month Picker",
+    component: RangeMonthPicker,
+    componentTS: rangeMonthPickerTS,
+  },
+  {
+    title: "Range Month Picker for one month picker",
+    component: RangeMonthPickerSelectsRange,
+    componentTS: rangeMonthPickerSelectsRangeTS,
+  },
+  {
+    title: "Range Quarter Picker",
+    component: RangeQuarterPicker,
+    componentTS: rangeQuarterPickerTS,
+  },
+  {
+    title: "Range Quarter Picker for one quarter picker",
+    component: RangeQuarterPickerSelectsRange,
+    componentTS: rangeQuarterPickerSelectsRangeTS,
+  },
+  {
+    title: "Range Swap Range",
+    description:
+      "Swap the start and end date if the end date is before the start date in a pick sequence.",
+    component: RangeSwapRange,
+    componentTS: rangeSwapRangeTS,
+  },
+  {
+    title: "Read only datepicker",
+    component: ReadOnly,
+    componentTS: readOnlyTS,
+  },
+  {
+    title: "Select Time",
+    component: ShowTime,
+    componentTS: showTimeTS,
+  },
+  {
+    title: "Select Time Only",
+    component: ShowTimeOnly,
+    componentTS: showTimeOnlyTS,
+  },
+  {
+    title: "Hide Time Caption",
+    component: HideTimeCaption,
+    componentTS: hideTimeCaptionTS,
+  },
+  {
+    title: "Show previous months",
+    component: MultiMonthPrevious,
+    componentTS: multiMonthPreviousTS,
+  },
+  {
+    title: "Specific date range",
+    component: SpecificDateRange,
+    componentTS: specificDateRangeTS,
+  },
+  {
+    title: "Specific Time Range",
+    component: ExcludeTimePeriod,
+    componentTS: excludeTimePeriodTS,
+  },
+  {
+    title: "Select multiple dates",
+    component: SelectsMultiple,
+    componentTS: selectsMultipleTS,
+  },
+  {
+    title: "Select multiple months",
+    component: SelectsMultipleMonths,
+    componentTS: selectsMultipleMonthsTS,
+  },
+  {
+    title: "Strict parsing",
+    description:
+      "Enables strict format validation for manual date input. When this flag is activated, the component will only accept values that exactly match the specified date format (`dateFormat`).",
+    component: StrictParsing,
+    componentTS: strictParsingTS,
+  },
+  {
+    title: "TabIndex",
+    component: TabIndex,
+    componentTS: tabIndexTS,
+  },
+  {
+    title: "Today button",
+    component: Today,
+    componentTS: todayTS,
+  },
+  {
+    title: "Year Picker",
+    component: YearPicker,
+    componentTS: yearPickerTS,
+  },
+  {
+    title: "Range Year Picker",
+    component: RangeYearPicker,
+    componentTS: rangeYearPickerTS,
+  },
+  {
+    title: "Range Year Picker for one datepicker",
+    component: RangeYearPickerSelectsRange,
+    componentTS: rangeYearPickerSelectsRangeTS,
+  },
+  {
+    title: "Year dropdown",
+    component: YearDropdown,
+    componentTS: yearDropdownTS,
+  },
+  {
+    title: "Year select dropdown",
+    component: YearSelectDropdown,
+    componentTS: yearSelectDropdownTS,
+  },
+  {
+    title: "Year item number",
+    component: YearItemNumber,
+    componentTS: yearItemNumberTS,
+  },
+  {
+    title: "Calendar Start day",
+    component: CalendarStartDay,
+    componentTS: calendarStartDayTS,
+  },
+  {
+    title: "Week Picker",
+    component: WeekPicker,
+    componentTS: weekPickerTS,
+  },
+  {
+    title: "Exclude Weeks",
+    component: ExcludeWeeks,
+    componentTS: excludeWeeksTS,
+  },
+  {
+    title: "External Form",
+    component: ExternalForm,
+    componentTS: externalFormTS,
+  },
+];
diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss
index 9c38c04cec..34f7081944 100644
--- a/docs-site/src/components/Examples/examples.scss
+++ b/docs-site/src/components/Examples/examples.scss
@@ -68,6 +68,30 @@
     margin-bottom: 20px;
   }
 
+  &__tabs {
+    display: flex;
+  }
+
+  &__tab {
+    font-family: "Open Sans", sans-serif;
+    box-sizing: border-box;
+    padding: 8px;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.2s ease;
+  }
+
+  &__tab:hover {
+    border-bottom: 2px solid #216ba5;
+  }
+
+  &__tab.active {
+    border-bottom: 2px solid #216ba5;
+  }
+
   &__code {
     position: relative;
     background-color: #f5f8fb;
@@ -75,8 +99,7 @@
     margin-left: -20px;
     border-top: 1px solid #d8e4ef;
     border-bottom: 1px solid #d8e4ef;
-    overflow-x: auto;
-    overflow-y: hidden;
+    overflow: auto hidden;
 
     @include helpers.breakpoint(768px) {
       width: 70%;
@@ -98,15 +121,19 @@
       z-index: 10;
     }
   }
+
   &__preview {
     padding: 20px;
+
     @include helpers.breakpoint(768px) {
       width: 30%;
     }
+
     @media (max-width: 768px) {
       padding-left: 0;
     }
   }
+
   &#example-portal-by-id {
     position: relative;
     overflow: hidden;
@@ -121,9 +148,11 @@
   .react-datepicker__week:nth-child(3n + 1) {
     background-color: #215005;
   }
+
   .react-datepicker__week:nth-child(3n + 2) {
     background-color: #eea429;
   }
+
   .react-datepicker__week:nth-child(3n + 3) {
     background-color: #a82a15;
   }
diff --git a/docs-site/src/components/Examples/hero.scss b/docs-site/src/components/Examples/hero.scss
index a9f34dd041..35ebc67aff 100644
--- a/docs-site/src/components/Examples/hero.scss
+++ b/docs-site/src/components/Examples/hero.scss
@@ -6,6 +6,7 @@
 
   &__content {
     @extend %container-styling;
+
     text-align: center;
     padding: 175px 0;
   }
diff --git a/docs-site/src/components/Examples/index.jsx b/docs-site/src/components/Examples/index.jsx
deleted file mode 100644
index 0584f09c3a..0000000000
--- a/docs-site/src/components/Examples/index.jsx
+++ /dev/null
@@ -1,609 +0,0 @@
-import React from "react";
-import hljs from "highlight.js/lib/core";
-import hljsJavaScriptLanguage from "highlight.js/lib/languages/javascript";
-import slugify from "slugify";
-import CodeExampleComponent from "../Example/index.jsx";
-
-import Default from "../../examples/default?raw";
-import NoAnchorArrow from "../../examples/noAnchorArrow?raw";
-import ShowTime from "../../examples/showTime?raw";
-import ShowTimeOnly from "../../examples/showTimeOnly?raw";
-import HideTimeCaption from "../../examples/hideTimeCaption?raw";
-import ExcludeTimes from "../../examples/excludeTimes?raw";
-import IncludeTimes from "../../examples/includeTimes?raw";
-import InjectTimes from "../../examples/injectTimes?raw";
-import FilterTimes from "../../examples/filterTimes?raw";
-import ExcludeTimePeriod from "../../examples/excludeTimePeriod?raw";
-import CustomDateFormat from "../../examples/customDateFormat?raw";
-import CustomClassName from "../../examples/customClassName?raw";
-import CustomCalendarClassName from "../../examples/customCalendarClassName?raw";
-import CustomDayClassName from "../../examples/customDayClassName?raw";
-import CustomTimeClassName from "../../examples/customTimeClassName?raw";
-import Today from "../../examples/today?raw";
-import PlaceholderText from "../../examples/placeholderText?raw";
-import SpecificDateRange from "../../examples/specificDateRange?raw";
-import MinDate from "../../examples/minDate?raw";
-import MaxDate from "../../examples/maxDate?raw";
-import DateRangeWithShowDisabledNavigation from "../../examples/dateRangeWithShowDisabledNavigation?raw";
-import Locale from "../../examples/locale?raw";
-import LocaleWithTime from "../../examples/localeWithTime?raw";
-import LocaleWithoutGlobalVariable from "../../examples/localeWithoutGlobalVariable?raw";
-import ExcludeDates from "../../examples/excludeDates?raw";
-import ExcludedWithMessage from "../../examples/excludeDatesWithMessage?raw";
-import ExcludeDateIntervals from "../../examples/excludeDateIntervals?raw";
-import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker?raw";
-import ExcludeDatesRangeMonthPicker from "../../examples/excludeDatesRangeMonthPicker?raw";
-import HighlightDates from "../../examples/highlightDates?raw";
-import HolidayDates from "../../examples/holidayDates?raw";
-import HighlightDatesRanges from "../../examples/highlightDatesRanges?raw";
-import IncludeDates from "../../examples/includeDates?raw";
-import IncludeDateIntervals from "../../examples/includeDateIntervals?raw";
-import IncludeDatesMonthPicker from "../../examples/includeDatesMonthPicker?raw";
-import FilterDates from "../../examples/filterDates?raw";
-import DateRange from "../../examples/dateRange?raw";
-import DateRangeInputWithClearButton from "../../examples/dateRangeInputWithClearButton?raw";
-import DateRangeWithPortal from "../../examples/dateRangeWithPortal?raw";
-import Disabled from "../../examples/disabled?raw";
-import DisabledKeyboardNavigation from "../../examples/disabledKeyboardNavigation?raw";
-import ReadOnly from "../../examples/readOnly?raw";
-import ClearInput from "../../examples/clearInput?raw";
-import OnBlurCallbacks from "../../examples/onBlurCallbacks?raw";
-import ConfigureFloatingUI from "../../examples/configureFloatingUI?raw";
-import Portal from "../../examples/portal?raw";
-import PortalById from "../../examples/portalById?raw";
-import WithPortalById from "../../examples/withPortalById?raw";
-import TabIndex from "../../examples/tabIndex?raw";
-import YearDropdown from "../../examples/yearDropdown?raw";
-import YearItemNumber from "../../examples/yearItemNumber?raw";
-import MonthDropdown from "../../examples/monthDropdown?raw";
-import MonthDropdownShort from "../../examples/monthDropdownShort?raw";
-import MonthYearDropdown from "../../examples/monthYearDropdown?raw";
-import YearSelectDropdown from "../../examples/yearSelectDropdown?raw";
-import Inline from "../../examples/inline?raw";
-import InlineVisible from "../../examples/inlineVisible?raw";
-import OpenToDate from "../../examples/openToDate?raw";
-import FixedCalendar from "../../examples/fixedCalendar?raw";
-import WeekNumbers from "../../examples/weekNumbers?raw";
-import CustomInput from "../../examples/customInput?raw";
-import MultiMonth from "../../examples/multiMonth?raw";
-import MultiMonthPrevious from "../../examples/multiMonthPrevious?raw";
-import MultiMonthDropdown from "../../examples/multiMonthDropdown?raw";
-import MultiMonthInline from "../../examples/multiMonthInline?raw";
-import Children from "../../examples/children?raw";
-import CalendarContainer from "../../examples/calendarContainer?raw";
-import RawChange from "../../examples/rawChange?raw";
-import DontCloseOnSelect from "../../examples/dontCloseOnSelect?raw";
-import RenderCustomHeader from "../../examples/renderCustomHeader?raw";
-import RenderCustomHeaderTwoMonths from "../../examples/renderCustomHeaderTwoMonths?raw";
-import RenderCustomDay from "../../examples/renderCustomDay?raw";
-import RenderCustomMonth from "../../examples/renderCustomMonth?raw";
-import RenderCustomQuarter from "../../examples/renderCustomQuarter?raw";
-import RenderCustomYear from "../../examples/renderCustomYear?raw";
-import TimeInput from "../../examples/timeInput?raw";
-import StrictParsing from "../../examples/strictParsing?raw";
-import MonthPicker from "../../examples/monthPicker?raw";
-import WeekPicker from "../../examples/weekPicker?raw";
-import ExcludeWeeks from "../../examples/excludeWeeks?raw";
-import monthPickerFullName from "../../examples/monthPickerFullName?raw";
-import monthPickerTwoColumns from "../../examples/monthPickerTwoColumns?raw";
-import monthPickerFourColumns from "../../examples/monthPickerFourColumns?raw";
-import RangeMonthPicker from "../../examples/rangeMonthPicker?raw";
-import RangeMonthPickerSelectsRange from "../../examples/rangeMonthPickerSelectsRange?raw";
-import QuarterPicker from "../../examples/quarterPicker?raw";
-import RangeQuarterPicker from "../../examples/rangeQuarterPicker?raw";
-import RangeQuarterPickerSelectsRange from "../../examples/rangeQuarterPickerSelectsRange?raw";
-import YearPicker from "../../examples/yearPicker?raw";
-import RangeYearPicker from "../../examples/rangeYearPicker?raw";
-import RangeYearPickerSelectsRange from "../../examples/rangeYearPickerSelectsRange?raw";
-import OnCalendarChangeStateCallbacks from "../../examples/onCalendarOpenStateCallbacks?raw";
-import CustomTimeInput from "../../examples/customTimeInput?raw";
-import CloseOnScroll from "../../examples/closeOnScroll?raw";
-import CloseOnScrollCallback from "../../examples/closeOnScrollCallback?raw";
-import SelectsRange from "../../examples/selectsRange?raw";
-import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates?raw";
-import CalendarStartDay from "../../examples/calendarStartDay?raw";
-import ExternalForm from "../../examples/externalForm?raw";
-import CalendarIcon from "../../examples/calendarIcon?raw";
-import SelectsMultiple from "../../examples/selectsMultiple?raw";
-import SelectsMultipleMonths from "../../examples/selectsMultipleMonths?raw";
-import CalendarIconExternal from "../../examples/calendarIconExternal?raw";
-import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon?raw";
-import ToggleCalendarOnIconClick from "../../examples/toggleCalendarOnIconClick?raw";
-import SwapRange from "../../examples/rangeSwapRange?raw";
-
-import "./style.scss";
-import "react-datepicker/dist/react-datepicker.css";
-
-export default class exampleComponents extends React.Component {
-  componentDidMount() {
-    hljs.registerLanguage("javascript", hljsJavaScriptLanguage);
-    hljs.highlightAll();
-  }
-
-  examples = [
-    {
-      title: "Default",
-      component: Default,
-    },
-    {
-      title: "Calendar Icon",
-      component: CalendarIcon,
-    },
-    {
-      title: "Calendar Icon using React Svg Component",
-      component: CalendarIconSvgIcon,
-    },
-    {
-      title: "Calendar Icon using External Lib",
-      component: CalendarIconExternal,
-    },
-    {
-      title: "Toggle Calendar open status on click of the calendar icon",
-      component: ToggleCalendarOnIconClick,
-    },
-    {
-      title: "Calendar container",
-      component: CalendarContainer,
-    },
-    {
-      title: "Calendar open state callbacks",
-      component: OnCalendarChangeStateCallbacks,
-    },
-    {
-      title: "Children",
-      component: Children,
-    },
-    {
-      title: "Clear datepicker input",
-      component: ClearInput,
-    },
-    {
-      title: "Close on scroll",
-      component: CloseOnScroll,
-    },
-    {
-      title: "Close on scroll callback",
-      component: CloseOnScrollCallback,
-    },
-    {
-      title: "Configure Floating UI Properties",
-      component: ConfigureFloatingUI,
-      description: (
-        <div>
-          Full docs for the underlying library that manages the overlay used can
-          be found at{" "}
-          <a
-            href="https://floating-ui.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            floating-ui.com
-          </a>
-        </div>
-      ),
-    },
-    {
-      title: "Custom input",
-      component: CustomInput,
-    },
-    {
-      title: "Custom header",
-      component: RenderCustomHeader,
-    },
-    {
-      title: "Custom header with two months displayed",
-      component: RenderCustomHeaderTwoMonths,
-    },
-    {
-      title: "Custom Day",
-      component: RenderCustomDay,
-    },
-    {
-      title: "Custom Month",
-      component: RenderCustomMonth,
-    },
-    {
-      title: "Custom Quarter",
-      component: RenderCustomQuarter,
-    },
-    {
-      title: "Custom Year",
-      component: RenderCustomYear,
-    },
-    {
-      title: "Custom calendar class name",
-      component: CustomCalendarClassName,
-    },
-    {
-      title: "Custom class name",
-      component: CustomClassName,
-    },
-    {
-      title: "Custom day class name",
-      component: CustomDayClassName,
-    },
-    {
-      title: "Custom date format",
-      component: CustomDateFormat,
-    },
-    {
-      title: "Custom time class name",
-      component: CustomTimeClassName,
-    },
-    {
-      title: "Custom time input",
-      component: CustomTimeInput,
-    },
-    {
-      title: "Date Range",
-      component: DateRange,
-    },
-    {
-      title: "Date range for one datepicker",
-      component: SelectsRange,
-    },
-    {
-      title: "Date range for one datepicker with disabled dates highlighted",
-      component: selectsRangeWithDisabledDates,
-    },
-    {
-      title: "Date Range with disabled navigation shown",
-      component: DateRangeWithShowDisabledNavigation,
-    },
-    {
-      title: "Date Range using input with clear button",
-      component: DateRangeInputWithClearButton,
-    },
-    {
-      title: "Date Range with Portal",
-      component: DateRangeWithPortal,
-    },
-    {
-      title: "Disable datepicker",
-      component: Disabled,
-    },
-    {
-      title: "Disable keyboard navigation",
-      component: DisabledKeyboardNavigation,
-    },
-    {
-      title: "Display Week Numbers",
-      component: WeekNumbers,
-    },
-    {
-      title: "Don't hide calendar on date selection",
-      component: DontCloseOnSelect,
-    },
-    {
-      title: "Exclude dates",
-      component: ExcludeDates,
-    },
-    {
-      title: "Exclude dates with message",
-      component: ExcludedWithMessage,
-    },
-    {
-      title: "Exclude date intervals",
-      component: ExcludeDateIntervals,
-    },
-    {
-      title: "Exclude Months in Month Picker",
-      component: ExcludeDatesMonthPicker,
-    },
-    {
-      title: "Exclude Months in Range Month Picker",
-      component: ExcludeDatesRangeMonthPicker,
-    },
-    {
-      title: "Exclude Times",
-      component: ExcludeTimes,
-    },
-    {
-      title: "Filter dates",
-      component: FilterDates,
-    },
-    {
-      title: "Filter times",
-      component: FilterTimes,
-    },
-    {
-      title: "Fixed height of Calendar",
-      component: FixedCalendar,
-    },
-    {
-      title: "Get raw input value on change",
-      component: RawChange,
-    },
-    {
-      title: "Highlight dates",
-      component: HighlightDates,
-    },
-    {
-      title: "Highlight dates with custom class names and ranges",
-      component: HighlightDatesRanges,
-    },
-    {
-      title: "Holiday dates",
-      component: HolidayDates,
-    },
-    {
-      title: "Include dates",
-      component: IncludeDates,
-    },
-    {
-      title: "Include date intervals",
-      component: IncludeDateIntervals,
-    },
-    {
-      title: "Include Months in Month Picker",
-      component: IncludeDatesMonthPicker,
-    },
-    {
-      title: "Include Times",
-      component: IncludeTimes,
-    },
-    {
-      title: "Inject Specific Times",
-      component: InjectTimes,
-    },
-    {
-      title: "Inline version",
-      component: Inline,
-    },
-    {
-      title: "Button to show Inline version",
-      component: InlineVisible,
-    },
-    {
-      title: "Input time",
-      component: TimeInput,
-    },
-    {
-      title: "Locale",
-      component: Locale,
-    },
-    {
-      title: "Locale with time",
-      component: LocaleWithTime,
-    },
-    {
-      title: "Locale without global variables",
-      component: LocaleWithoutGlobalVariable,
-    },
-    {
-      title: "Min date",
-      component: MinDate,
-    },
-    {
-      title: "Max date",
-      component: MaxDate,
-    },
-    {
-      title: "Month Picker",
-      component: MonthPicker,
-    },
-    {
-      title: "Month Picker with Full Name",
-      component: monthPickerFullName,
-    },
-    {
-      title: "Month Picker Two Columns Layout",
-      component: monthPickerTwoColumns,
-    },
-    {
-      title: "Month Picker Four Columns Layout",
-      component: monthPickerFourColumns,
-    },
-    {
-      title: "Month dropdown",
-      component: MonthDropdown,
-    },
-    {
-      title: "Month dropdown short month",
-      component: MonthDropdownShort,
-    },
-    {
-      title: "MonthYear dropdown",
-      component: MonthYearDropdown,
-    },
-    {
-      title: "Multiple months",
-      component: MultiMonth,
-    },
-    {
-      title: "Multiple months with year dropdown",
-      component: MultiMonthDropdown,
-    },
-    {
-      title: "Multiple months inline",
-      component: MultiMonthInline,
-    },
-    {
-      title: "No Anchor Arrow",
-      component: NoAnchorArrow,
-    },
-    {
-      title: "onBlur callbacks in console",
-      component: OnBlurCallbacks,
-    },
-    {
-      title: "Open to date",
-      component: OpenToDate,
-    },
-    {
-      title: "Placeholder text",
-      component: PlaceholderText,
-    },
-    {
-      title: "Portal version",
-      component: Portal,
-    },
-    {
-      title: "Portal by id",
-      description:
-        "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
-      component: PortalById,
-    },
-    {
-      title: "Portal version with portal by id",
-      description:
-        "If the provided portalId cannot be found in the dom, one will be created by default with that id.",
-      component: WithPortalById,
-    },
-    {
-      title: "Quarter Picker",
-      component: QuarterPicker,
-    },
-    {
-      title: "Range Month Picker",
-      component: RangeMonthPicker,
-    },
-    {
-      title: "Range Month Picker for one month picker",
-      component: RangeMonthPickerSelectsRange,
-    },
-    {
-      title: "Range Quarter Picker",
-      component: RangeQuarterPicker,
-    },
-    {
-      title: "Range Quarter Picker for one quarter picker",
-      component: RangeQuarterPickerSelectsRange,
-    },
-    {
-      title: "Range Swap Range",
-      description:
-        "Swap the start and end date if the end date is before the start date in a pick sequence.",
-      component: SwapRange,
-    },
-    {
-      title: "Read only datepicker",
-      component: ReadOnly,
-    },
-    {
-      title: "Select Time",
-      component: ShowTime,
-    },
-    {
-      title: "Select Time Only",
-      component: ShowTimeOnly,
-    },
-    {
-      title: "Hide Time Caption",
-      component: HideTimeCaption,
-    },
-    {
-      title: "Show previous months",
-      component: MultiMonthPrevious,
-    },
-    {
-      title: "Specific date range",
-      component: SpecificDateRange,
-    },
-    {
-      title: "Specific Time Range",
-      component: ExcludeTimePeriod,
-    },
-    {
-      title: "Select multiple dates",
-      component: SelectsMultiple,
-    },
-    {
-      title: "Select multiple months",
-      component: SelectsMultipleMonths,
-    },
-    {
-      title: "Strict parsing",
-      component: StrictParsing,
-    },
-    {
-      title: "TabIndex",
-      component: TabIndex,
-    },
-    {
-      title: "Today button",
-      component: Today,
-    },
-    {
-      title: "Year Picker",
-      component: YearPicker,
-    },
-    {
-      title: "Range Year Picker",
-      component: RangeYearPicker,
-    },
-    {
-      title: "Range Year Picker for one datepicker",
-      component: RangeYearPickerSelectsRange,
-    },
-    {
-      title: "Year dropdown",
-      component: YearDropdown,
-    },
-    {
-      title: "Year select dropdown",
-      component: YearSelectDropdown,
-    },
-    {
-      title: "Year item number",
-      component: YearItemNumber,
-    },
-    {
-      title: "Calendar Start day",
-      component: CalendarStartDay,
-    },
-    {
-      title: "Week Picker",
-      component: WeekPicker,
-    },
-    {
-      title: "Exclude Weeks",
-      component: ExcludeWeeks,
-    },
-    {
-      title: "External Form",
-      component: ExternalForm,
-    },
-  ];
-
-  handleAnchorClick = (e, id) => {
-    e.preventDefault();
-    window.history.replaceState(null, document.title, `#${id}`);
-    document
-      .getElementById(id)
-      .scrollIntoView({ behavior: "smooth", block: "start" });
-  };
-
-  render() {
-    return (
-      <>
-        <h1>Examples</h1>
-        <ul className="examples__navigation">
-          {this.examples.map((example) => (
-            <li
-              className="examples__navigation-item"
-              key={`link-${example.title}`}
-            >
-              <a
-                href={`#example-${slugify(example.title, { lower: true })}`}
-                onClick={(e) =>
-                  this.handleAnchorClick(
-                    e,
-                    `example-${slugify(example.title, { lower: true })}`,
-                  )
-                }
-              >
-                {example.title}
-              </a>
-            </li>
-          ))}
-        </ul>
-        <div className="examples">
-          {this.examples.map((example) => (
-            <CodeExampleComponent key={example.title} example={example} />
-          ))}
-        </div>
-      </>
-    );
-  }
-}
diff --git a/docs-site/src/components/Examples/index.tsx b/docs-site/src/components/Examples/index.tsx
new file mode 100644
index 0000000000..68f15f97e1
--- /dev/null
+++ b/docs-site/src/components/Examples/index.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import hljs from "highlight.js/lib/core";
+import hljsJavaScriptLanguage from "highlight.js/lib/languages/javascript";
+import slugify from "slugify";
+import CodeExampleComponent from "../Example/index.jsx";
+
+import "./style.scss";
+import "react-datepicker/dist/react-datepicker.css";
+import { EXAMPLE_CONFIG } from "./config.js";
+
+export default class exampleComponents extends React.Component {
+  componentDidMount() {
+    hljs.registerLanguage("javascript", hljsJavaScriptLanguage);
+    hljs.highlightAll();
+  }
+
+  handleAnchorClick = (e: React.MouseEvent, id: string): void => {
+    e.preventDefault();
+    window.history.replaceState(null, document.title, `#${id}`);
+    document
+      .getElementById(id)
+      ?.scrollIntoView({ behavior: "smooth", block: "start" });
+  };
+
+  render() {
+    return (
+      <>
+        <h1>Examples</h1>
+        <ul className="examples__navigation">
+          {EXAMPLE_CONFIG.map((example) => (
+            <li
+              className="examples__navigation-item"
+              key={`link-${example.title}`}
+            >
+              <a
+                href={`#example-${slugify(example.title, { lower: true })}`}
+                onClick={(e) =>
+                  this.handleAnchorClick(
+                    e,
+                    `example-${slugify(example.title, { lower: true })}`,
+                  )
+                }
+              >
+                {example.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+        <div className="examples">
+          {EXAMPLE_CONFIG.map((example) => (
+            <CodeExampleComponent key={example.title} example={example} />
+          ))}
+        </div>
+      </>
+    );
+  }
+}
diff --git a/docs-site/src/components/Examples/reset.scss b/docs-site/src/components/Examples/reset.scss
index 04a683bf25..72f4a5c1ad 100644
--- a/docs-site/src/components/Examples/reset.scss
+++ b/docs-site/src/components/Examples/reset.scss
@@ -114,10 +114,10 @@ blockquote {
   quotes: none;
 }
 
-q:before,
-q:after,
-blockquote:before,
-blockquote:after {
+q::before,
+q::after,
+blockquote::before,
+blockquote::after {
   content: "";
   content: none;
 }
diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss
index cb7ad5e36c..9f3fa05280 100644
--- a/docs-site/src/components/Examples/style.scss
+++ b/docs-site/src/components/Examples/style.scss
@@ -67,6 +67,7 @@ strong {
 
 .wrapper {
   @extend %container-styling;
+
   padding: 20px;
 }
 
diff --git a/docs-site/src/examples/calendarContainer.js b/docs-site/src/examples/js/calendarContainer.js
similarity index 99%
rename from docs-site/src/examples/calendarContainer.js
rename to docs-site/src/examples/js/calendarContainer.js
index 5bb2563024..813d2fbc34 100644
--- a/docs-site/src/examples/calendarContainer.js
+++ b/docs-site/src/examples/js/calendarContainer.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const MyContainer = ({ className, children }) => {
     return (
       <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
@@ -12,6 +13,7 @@
       </div>
     );
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/calendarIcon.js b/docs-site/src/examples/js/calendarIcon.js
similarity index 99%
rename from docs-site/src/examples/calendarIcon.js
rename to docs-site/src/examples/js/calendarIcon.js
index e94873b8d3..8b88b36655 100644
--- a/docs-site/src/examples/calendarIcon.js
+++ b/docs-site/src/examples/js/calendarIcon.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/calendarIconExternal.js b/docs-site/src/examples/js/calendarIconExternal.js
similarity index 99%
rename from docs-site/src/examples/calendarIconExternal.js
rename to docs-site/src/examples/js/calendarIconExternal.js
index f3e6f6b26d..f037967d08 100644
--- a/docs-site/src/examples/calendarIconExternal.js
+++ b/docs-site/src/examples/js/calendarIconExternal.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/calendarIconSvgIcon.js b/docs-site/src/examples/js/calendarIconSvgIcon.js
similarity index 99%
rename from docs-site/src/examples/calendarIconSvgIcon.js
rename to docs-site/src/examples/js/calendarIconSvgIcon.js
index ffd88f8bc3..f9eefbfa03 100644
--- a/docs-site/src/examples/calendarIconSvgIcon.js
+++ b/docs-site/src/examples/js/calendarIconSvgIcon.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/calendarStartDay.js b/docs-site/src/examples/js/calendarStartDay.js
similarity index 99%
rename from docs-site/src/examples/calendarStartDay.js
rename to docs-site/src/examples/js/calendarStartDay.js
index 9552124d92..15c2f30113 100644
--- a/docs-site/src/examples/calendarStartDay.js
+++ b/docs-site/src/examples/js/calendarStartDay.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/children.js b/docs-site/src/examples/js/children.js
similarity index 99%
rename from docs-site/src/examples/children.js
rename to docs-site/src/examples/js/children.js
index c7b8475250..330230b1e6 100644
--- a/docs-site/src/examples/children.js
+++ b/docs-site/src/examples/js/children.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker selected={startDate} onChange={(date) => setStartDate(date)}>
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
diff --git a/docs-site/src/examples/clearInput.js b/docs-site/src/examples/js/clearInput.js
similarity index 99%
rename from docs-site/src/examples/clearInput.js
rename to docs-site/src/examples/js/clearInput.js
index 759304f4f6..3cd1393e3f 100644
--- a/docs-site/src/examples/clearInput.js
+++ b/docs-site/src/examples/js/clearInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/closeOnScroll.js b/docs-site/src/examples/js/closeOnScroll.js
similarity index 87%
rename from docs-site/src/examples/closeOnScroll.js
rename to docs-site/src/examples/js/closeOnScroll.js
index 4deabe1d90..8f010ea572 100644
--- a/docs-site/src/examples/closeOnScroll.js
+++ b/docs-site/src/examples/js/closeOnScroll.js
@@ -1,8 +1,9 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
-      closeOnScroll={true}
+      closeOnScroll
       selected={startDate}
       onChange={(date) => setStartDate(date)}
     />
diff --git a/docs-site/src/examples/closeOnScrollCallback.js b/docs-site/src/examples/js/closeOnScrollCallback.js
similarity index 99%
rename from docs-site/src/examples/closeOnScrollCallback.js
rename to docs-site/src/examples/js/closeOnScrollCallback.js
index d9a3576d34..fd740a1ba5 100644
--- a/docs-site/src/examples/closeOnScrollCallback.js
+++ b/docs-site/src/examples/js/closeOnScrollCallback.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       closeOnScroll={(e) => e.target === document}
diff --git a/docs-site/src/examples/configureFloatingUI.js b/docs-site/src/examples/js/configureFloatingUI.js
similarity index 99%
rename from docs-site/src/examples/configureFloatingUI.js
rename to docs-site/src/examples/js/configureFloatingUI.js
index eb8311fd73..b6e57b369e 100644
--- a/docs-site/src/examples/configureFloatingUI.js
+++ b/docs-site/src/examples/js/configureFloatingUI.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customCalendarClassName.js b/docs-site/src/examples/js/customCalendarClassName.js
similarity index 99%
rename from docs-site/src/examples/customCalendarClassName.js
rename to docs-site/src/examples/js/customCalendarClassName.js
index 8e951036d7..d1d1c5590c 100644
--- a/docs-site/src/examples/customCalendarClassName.js
+++ b/docs-site/src/examples/js/customCalendarClassName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customClassName.js b/docs-site/src/examples/js/customClassName.js
similarity index 99%
rename from docs-site/src/examples/customClassName.js
rename to docs-site/src/examples/js/customClassName.js
index 11a3521e4c..d18a9a7128 100644
--- a/docs-site/src/examples/customClassName.js
+++ b/docs-site/src/examples/js/customClassName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customDateFormat.js b/docs-site/src/examples/js/customDateFormat.js
similarity index 99%
rename from docs-site/src/examples/customDateFormat.js
rename to docs-site/src/examples/js/customDateFormat.js
index 562735b69b..a5110ac583 100644
--- a/docs-site/src/examples/customDateFormat.js
+++ b/docs-site/src/examples/js/customDateFormat.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       dateFormat="yyyy/MM/dd"
diff --git a/docs-site/src/examples/customDayClassName.js b/docs-site/src/examples/js/customDayClassName.js
similarity index 99%
rename from docs-site/src/examples/customDayClassName.js
rename to docs-site/src/examples/js/customDayClassName.js
index 989a7cbc9e..2c0178843e 100644
--- a/docs-site/src/examples/customDayClassName.js
+++ b/docs-site/src/examples/js/customDayClassName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customInput.js b/docs-site/src/examples/js/customInput.js
similarity index 99%
rename from docs-site/src/examples/customInput.js
rename to docs-site/src/examples/js/customInput.js
index 7312003114..2327699d18 100644
--- a/docs-site/src/examples/customInput.js
+++ b/docs-site/src/examples/js/customInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const ExampleCustomInput = forwardRef(
     ({ value, onClick, className }, ref) => (
       <button className={className} onClick={onClick} ref={ref}>
@@ -7,6 +8,7 @@
       </button>
     ),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/customTimeClassName.js b/docs-site/src/examples/js/customTimeClassName.js
similarity index 90%
rename from docs-site/src/examples/customTimeClassName.js
rename to docs-site/src/examples/js/customTimeClassName.js
index 8c53ea413e..253f019215 100644
--- a/docs-site/src/examples/customTimeClassName.js
+++ b/docs-site/src/examples/js/customTimeClassName.js
@@ -1,7 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
 
-  let handleColor = (time) => {
+  const handleColor = (time) => {
     return time.getHours() > 12 ? "text-success" : "text-error";
   };
 
diff --git a/docs-site/src/examples/customTimeInput.js b/docs-site/src/examples/js/customTimeInput.js
similarity index 99%
rename from docs-site/src/examples/customTimeInput.js
rename to docs-site/src/examples/js/customTimeInput.js
index 4cb543ed05..8288b5f3aa 100644
--- a/docs-site/src/examples/customTimeInput.js
+++ b/docs-site/src/examples/js/customTimeInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const ExampleCustomTimeInput = ({ value, onChange }) => (
     <input
       value={value}
@@ -8,6 +9,7 @@
       style={{ border: "solid 1px pink" }}
     />
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/dateRange.js b/docs-site/src/examples/js/dateRange.js
similarity index 99%
rename from docs-site/src/examples/dateRange.js
rename to docs-site/src/examples/js/dateRange.js
index 96e2c887f2..110fe222ea 100644
--- a/docs-site/src/examples/dateRange.js
+++ b/docs-site/src/examples/js/dateRange.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2014/02/10"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/dateRangeInputWithClearButton.js b/docs-site/src/examples/js/dateRangeInputWithClearButton.js
similarity index 91%
rename from docs-site/src/examples/dateRangeInputWithClearButton.js
rename to docs-site/src/examples/js/dateRangeInputWithClearButton.js
index edd6199709..b17d9f4170 100644
--- a/docs-site/src/examples/dateRangeInputWithClearButton.js
+++ b/docs-site/src/examples/js/dateRangeInputWithClearButton.js
@@ -1,14 +1,15 @@
 () => {
   const [dateRange, setDateRange] = useState([null, null]);
   const [startDate, endDate] = dateRange;
+
   return (
     <DatePicker
-      selectsRange={true}
       startDate={startDate}
       endDate={endDate}
       onChange={(update) => {
         setDateRange(update);
       }}
+      selectsRange
       isClearable={true}
     />
   );
diff --git a/docs-site/src/examples/dateRangeWithPortal.js b/docs-site/src/examples/js/dateRangeWithPortal.js
similarity index 91%
rename from docs-site/src/examples/dateRangeWithPortal.js
rename to docs-site/src/examples/js/dateRangeWithPortal.js
index fa7f5dbed5..22af3c5628 100644
--- a/docs-site/src/examples/dateRangeWithPortal.js
+++ b/docs-site/src/examples/js/dateRangeWithPortal.js
@@ -1,14 +1,15 @@
 () => {
   const [dateRange, setDateRange] = useState([null, null]);
   const [startDate, endDate] = dateRange;
+
   return (
     <DatePicker
-      selectsRange={true}
       startDate={startDate}
       endDate={endDate}
       onChange={(update) => {
         setDateRange(update);
       }}
+      selectsRange
       withPortal
     />
   );
diff --git a/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js b/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
similarity index 99%
rename from docs-site/src/examples/dateRangeWithShowDisabledNavigation.js
rename to docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
index 1f574fc8e0..f2cb355f45 100644
--- a/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js
+++ b/docs-site/src/examples/js/dateRangeWithShowDisabledNavigation.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/default.js b/docs-site/src/examples/js/default.js
similarity index 99%
rename from docs-site/src/examples/default.js
rename to docs-site/src/examples/js/default.js
index d3dc5e291d..89a44d0e49 100644
--- a/docs-site/src/examples/default.js
+++ b/docs-site/src/examples/js/default.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
   );
diff --git a/docs-site/src/examples/disabled.js b/docs-site/src/examples/js/disabled.js
similarity index 99%
rename from docs-site/src/examples/disabled.js
rename to docs-site/src/examples/js/disabled.js
index 237316a241..91e23654d5 100644
--- a/docs-site/src/examples/disabled.js
+++ b/docs-site/src/examples/js/disabled.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/disabledKeyboardNavigation.js b/docs-site/src/examples/js/disabledKeyboardNavigation.js
similarity index 99%
rename from docs-site/src/examples/disabledKeyboardNavigation.js
rename to docs-site/src/examples/js/disabledKeyboardNavigation.js
index e8e8b4942d..a598aa5dcc 100644
--- a/docs-site/src/examples/disabledKeyboardNavigation.js
+++ b/docs-site/src/examples/js/disabledKeyboardNavigation.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/dontCloseOnSelect.js b/docs-site/src/examples/js/dontCloseOnSelect.js
similarity index 99%
rename from docs-site/src/examples/dontCloseOnSelect.js
rename to docs-site/src/examples/js/dontCloseOnSelect.js
index 04807cad1e..94ec19d402 100644
--- a/docs-site/src/examples/dontCloseOnSelect.js
+++ b/docs-site/src/examples/js/dontCloseOnSelect.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDateIntervals.js b/docs-site/src/examples/js/excludeDateIntervals.js
similarity index 99%
rename from docs-site/src/examples/excludeDateIntervals.js
rename to docs-site/src/examples/js/excludeDateIntervals.js
index 616457e895..ee2f932589 100644
--- a/docs-site/src/examples/excludeDateIntervals.js
+++ b/docs-site/src/examples/js/excludeDateIntervals.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDates.js b/docs-site/src/examples/js/excludeDates.js
similarity index 99%
rename from docs-site/src/examples/excludeDates.js
rename to docs-site/src/examples/js/excludeDates.js
index 5934b2412a..31fa33274a 100644
--- a/docs-site/src/examples/excludeDates.js
+++ b/docs-site/src/examples/js/excludeDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDatesMonthPicker.js b/docs-site/src/examples/js/excludeDatesMonthPicker.js
similarity index 99%
rename from docs-site/src/examples/excludeDatesMonthPicker.js
rename to docs-site/src/examples/js/excludeDatesMonthPicker.js
index 13a0a0a256..3c409863a9 100644
--- a/docs-site/src/examples/excludeDatesMonthPicker.js
+++ b/docs-site/src/examples/js/excludeDatesMonthPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2024-08-01"));
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeDatesRangeMonthPicker.js b/docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
similarity index 100%
rename from docs-site/src/examples/excludeDatesRangeMonthPicker.js
rename to docs-site/src/examples/js/excludeDatesRangeMonthPicker.js
diff --git a/docs-site/src/examples/excludeDatesWithMessage.js b/docs-site/src/examples/js/excludeDatesWithMessage.js
similarity index 99%
rename from docs-site/src/examples/excludeDatesWithMessage.js
rename to docs-site/src/examples/js/excludeDatesWithMessage.js
index 59ab497926..5879d0caa8 100644
--- a/docs-site/src/examples/excludeDatesWithMessage.js
+++ b/docs-site/src/examples/js/excludeDatesWithMessage.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeTimePeriod.js b/docs-site/src/examples/js/excludeTimePeriod.js
similarity index 99%
rename from docs-site/src/examples/excludeTimePeriod.js
rename to docs-site/src/examples/js/excludeTimePeriod.js
index a10233b705..9cce5c97b4 100644
--- a/docs-site/src/examples/excludeTimePeriod.js
+++ b/docs-site/src/examples/js/excludeTimePeriod.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 17),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeTimes.js b/docs-site/src/examples/js/excludeTimes.js
similarity index 99%
rename from docs-site/src/examples/excludeTimes.js
rename to docs-site/src/examples/js/excludeTimes.js
index 2e9271632a..f288f28069 100644
--- a/docs-site/src/examples/excludeTimes.js
+++ b/docs-site/src/examples/js/excludeTimes.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/excludeWeeks.js b/docs-site/src/examples/js/excludeWeeks.js
similarity index 99%
rename from docs-site/src/examples/excludeWeeks.js
rename to docs-site/src/examples/js/excludeWeeks.js
index 0694be1b67..f28fef537f 100644
--- a/docs-site/src/examples/excludeWeeks.js
+++ b/docs-site/src/examples/js/excludeWeeks.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/externalForm.js b/docs-site/src/examples/js/externalForm.js
similarity index 86%
rename from docs-site/src/examples/externalForm.js
rename to docs-site/src/examples/js/externalForm.js
index 3b1e906a8a..2f981bb92b 100644
--- a/docs-site/src/examples/externalForm.js
+++ b/docs-site/src/examples/js/externalForm.js
@@ -10,7 +10,7 @@
         form="external-form"
       />
       <form id="external-form">
-        <input type="submit" />
+        <button type="submit">Submit</button>
       </form>
     </>
   );
diff --git a/docs-site/src/examples/filterDates.js b/docs-site/src/examples/js/filterDates.js
similarity index 99%
rename from docs-site/src/examples/filterDates.js
rename to docs-site/src/examples/js/filterDates.js
index 9eb67a0084..89cbba8316 100644
--- a/docs-site/src/examples/filterDates.js
+++ b/docs-site/src/examples/js/filterDates.js
@@ -1,9 +1,11 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   const isWeekday = (date) => {
     const day = getDay(date);
     return day !== 0 && day !== 6;
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/filterTimes.js b/docs-site/src/examples/js/filterTimes.js
similarity index 99%
rename from docs-site/src/examples/filterTimes.js
rename to docs-site/src/examples/js/filterTimes.js
index 3d95eb584b..a90ab49bdd 100644
--- a/docs-site/src/examples/filterTimes.js
+++ b/docs-site/src/examples/js/filterTimes.js
@@ -2,12 +2,14 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 0), 9),
   );
+
   const filterPassedTime = (time) => {
     const currentDate = new Date();
     const selectedDate = new Date(time);
 
     return currentDate.getTime() < selectedDate.getTime();
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/fixedCalendar.js b/docs-site/src/examples/js/fixedCalendar.js
similarity index 99%
rename from docs-site/src/examples/fixedCalendar.js
rename to docs-site/src/examples/js/fixedCalendar.js
index 30eb818e87..dfc34516cc 100644
--- a/docs-site/src/examples/fixedCalendar.js
+++ b/docs-site/src/examples/js/fixedCalendar.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/hideTimeCaption.js b/docs-site/src/examples/js/hideTimeCaption.js
similarity index 99%
rename from docs-site/src/examples/hideTimeCaption.js
rename to docs-site/src/examples/js/hideTimeCaption.js
index 214c7420ad..37537f7854 100644
--- a/docs-site/src/examples/hideTimeCaption.js
+++ b/docs-site/src/examples/js/hideTimeCaption.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/highlightDates.js b/docs-site/src/examples/js/highlightDates.js
similarity index 99%
rename from docs-site/src/examples/highlightDates.js
rename to docs-site/src/examples/js/highlightDates.js
index 27bc91c8c8..9299eaf0c5 100644
--- a/docs-site/src/examples/highlightDates.js
+++ b/docs-site/src/examples/js/highlightDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/highlightDatesRanges.js b/docs-site/src/examples/js/highlightDatesRanges.js
similarity index 99%
rename from docs-site/src/examples/highlightDatesRanges.js
rename to docs-site/src/examples/js/highlightDatesRanges.js
index 9035e1318b..780aa57fa6 100644
--- a/docs-site/src/examples/highlightDatesRanges.js
+++ b/docs-site/src/examples/js/highlightDatesRanges.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const highlightWithRanges = [
     {
       "react-datepicker__day--highlighted-custom-1": [
@@ -18,6 +19,7 @@
       ],
     },
   ];
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/holidayDates.js b/docs-site/src/examples/js/holidayDates.js
similarity index 99%
rename from docs-site/src/examples/holidayDates.js
rename to docs-site/src/examples/js/holidayDates.js
index 32c667ecff..64a0f18e8d 100644
--- a/docs-site/src/examples/holidayDates.js
+++ b/docs-site/src/examples/js/holidayDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeDateIntervals.js b/docs-site/src/examples/js/includeDateIntervals.js
similarity index 99%
rename from docs-site/src/examples/includeDateIntervals.js
rename to docs-site/src/examples/js/includeDateIntervals.js
index 3a22fa9222..095ba8ad3e 100644
--- a/docs-site/src/examples/includeDateIntervals.js
+++ b/docs-site/src/examples/js/includeDateIntervals.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeDates.js b/docs-site/src/examples/js/includeDates.js
similarity index 99%
rename from docs-site/src/examples/includeDates.js
rename to docs-site/src/examples/js/includeDates.js
index d4b177668c..0a8d009227 100644
--- a/docs-site/src/examples/includeDates.js
+++ b/docs-site/src/examples/js/includeDates.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeDatesMonthPicker.js b/docs-site/src/examples/js/includeDatesMonthPicker.js
similarity index 99%
rename from docs-site/src/examples/includeDatesMonthPicker.js
rename to docs-site/src/examples/js/includeDatesMonthPicker.js
index 4257e5bd83..6606df85d8 100644
--- a/docs-site/src/examples/includeDatesMonthPicker.js
+++ b/docs-site/src/examples/js/includeDatesMonthPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(1661990400000);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/includeTimes.js b/docs-site/src/examples/js/includeTimes.js
similarity index 99%
rename from docs-site/src/examples/includeTimes.js
rename to docs-site/src/examples/js/includeTimes.js
index 5ceece61e0..af3c2cae4a 100644
--- a/docs-site/src/examples/includeTimes.js
+++ b/docs-site/src/examples/js/includeTimes.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/injectTimes.js b/docs-site/src/examples/js/injectTimes.js
similarity index 99%
rename from docs-site/src/examples/injectTimes.js
rename to docs-site/src/examples/js/injectTimes.js
index eb83aff185..ef74376920 100644
--- a/docs-site/src/examples/injectTimes.js
+++ b/docs-site/src/examples/js/injectTimes.js
@@ -2,6 +2,7 @@
   const [startDate, setStartDate] = useState(
     setHours(setMinutes(new Date(), 30), 16),
   );
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/inline.js b/docs-site/src/examples/js/inline.js
similarity index 99%
rename from docs-site/src/examples/inline.js
rename to docs-site/src/examples/js/inline.js
index 0034f5dcb3..a568491571 100644
--- a/docs-site/src/examples/inline.js
+++ b/docs-site/src/examples/js/inline.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/inlineVisible.js b/docs-site/src/examples/js/inlineVisible.js
similarity index 99%
rename from docs-site/src/examples/inlineVisible.js
rename to docs-site/src/examples/js/inlineVisible.js
index 9649f919d7..cd5e9786ef 100644
--- a/docs-site/src/examples/inlineVisible.js
+++ b/docs-site/src/examples/js/inlineVisible.js
@@ -1,14 +1,17 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [isOpen, setIsOpen] = useState(false);
+
   const handleChange = (e) => {
     setIsOpen(!isOpen);
     setStartDate(e);
   };
+
   const handleClick = (e) => {
     e.preventDefault();
     setIsOpen(!isOpen);
   };
+
   return (
     <>
       <button className="example-custom-input" onClick={handleClick}>
diff --git a/docs-site/src/examples/locale.js b/docs-site/src/examples/js/locale.js
similarity index 99%
rename from docs-site/src/examples/locale.js
rename to docs-site/src/examples/js/locale.js
index 9761958de9..e12b700df6 100644
--- a/docs-site/src/examples/locale.js
+++ b/docs-site/src/examples/js/locale.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/localeWithTime.js b/docs-site/src/examples/js/localeWithTime.js
similarity index 99%
rename from docs-site/src/examples/localeWithTime.js
rename to docs-site/src/examples/js/localeWithTime.js
index 9e6338eb66..6c8b0d928d 100644
--- a/docs-site/src/examples/localeWithTime.js
+++ b/docs-site/src/examples/js/localeWithTime.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/localeWithoutGlobalVariable.js b/docs-site/src/examples/js/localeWithoutGlobalVariable.js
similarity index 99%
rename from docs-site/src/examples/localeWithoutGlobalVariable.js
rename to docs-site/src/examples/js/localeWithoutGlobalVariable.js
index 2f03ebb755..1ea3591443 100644
--- a/docs-site/src/examples/localeWithoutGlobalVariable.js
+++ b/docs-site/src/examples/js/localeWithoutGlobalVariable.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/maxDate.js b/docs-site/src/examples/js/maxDate.js
similarity index 99%
rename from docs-site/src/examples/maxDate.js
rename to docs-site/src/examples/js/maxDate.js
index bbe11c0c12..f9b9a0ae99 100644
--- a/docs-site/src/examples/maxDate.js
+++ b/docs-site/src/examples/js/maxDate.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/minDate.js b/docs-site/src/examples/js/minDate.js
similarity index 99%
rename from docs-site/src/examples/minDate.js
rename to docs-site/src/examples/js/minDate.js
index 3183efe325..b1be62f3f9 100644
--- a/docs-site/src/examples/minDate.js
+++ b/docs-site/src/examples/js/minDate.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthDropdown.js b/docs-site/src/examples/js/monthDropdown.js
similarity index 99%
rename from docs-site/src/examples/monthDropdown.js
rename to docs-site/src/examples/js/monthDropdown.js
index 4c0b8421d1..12eaab2444 100644
--- a/docs-site/src/examples/monthDropdown.js
+++ b/docs-site/src/examples/js/monthDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthDropdownShort.js b/docs-site/src/examples/js/monthDropdownShort.js
similarity index 99%
rename from docs-site/src/examples/monthDropdownShort.js
rename to docs-site/src/examples/js/monthDropdownShort.js
index 2efd131b3e..e073b74e81 100644
--- a/docs-site/src/examples/monthDropdownShort.js
+++ b/docs-site/src/examples/js/monthDropdownShort.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPicker.js b/docs-site/src/examples/js/monthPicker.js
similarity index 99%
rename from docs-site/src/examples/monthPicker.js
rename to docs-site/src/examples/js/monthPicker.js
index d6274f9743..e72910dec7 100644
--- a/docs-site/src/examples/monthPicker.js
+++ b/docs-site/src/examples/js/monthPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPickerFourColumns.js b/docs-site/src/examples/js/monthPickerFourColumns.js
similarity index 99%
rename from docs-site/src/examples/monthPickerFourColumns.js
rename to docs-site/src/examples/js/monthPickerFourColumns.js
index 235e4a3eb8..9ad3c67749 100644
--- a/docs-site/src/examples/monthPickerFourColumns.js
+++ b/docs-site/src/examples/js/monthPickerFourColumns.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPickerFullName.js b/docs-site/src/examples/js/monthPickerFullName.js
similarity index 99%
rename from docs-site/src/examples/monthPickerFullName.js
rename to docs-site/src/examples/js/monthPickerFullName.js
index 1d424bab41..244701efba 100644
--- a/docs-site/src/examples/monthPickerFullName.js
+++ b/docs-site/src/examples/js/monthPickerFullName.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthPickerTwoColumns.js b/docs-site/src/examples/js/monthPickerTwoColumns.js
similarity index 99%
rename from docs-site/src/examples/monthPickerTwoColumns.js
rename to docs-site/src/examples/js/monthPickerTwoColumns.js
index d2d41d0d43..0aeee4cf0f 100644
--- a/docs-site/src/examples/monthPickerTwoColumns.js
+++ b/docs-site/src/examples/js/monthPickerTwoColumns.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/monthYearDropdown.js b/docs-site/src/examples/js/monthYearDropdown.js
similarity index 99%
rename from docs-site/src/examples/monthYearDropdown.js
rename to docs-site/src/examples/js/monthYearDropdown.js
index 664f5d4ecc..87ea8d62b6 100644
--- a/docs-site/src/examples/monthYearDropdown.js
+++ b/docs-site/src/examples/js/monthYearDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonth.js b/docs-site/src/examples/js/multiMonth.js
similarity index 99%
rename from docs-site/src/examples/multiMonth.js
rename to docs-site/src/examples/js/multiMonth.js
index 14245cb84d..ee339a764e 100644
--- a/docs-site/src/examples/multiMonth.js
+++ b/docs-site/src/examples/js/multiMonth.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonthDropdown.js b/docs-site/src/examples/js/multiMonthDropdown.js
similarity index 99%
rename from docs-site/src/examples/multiMonthDropdown.js
rename to docs-site/src/examples/js/multiMonthDropdown.js
index b9c5c4226c..7bfdef31ab 100644
--- a/docs-site/src/examples/multiMonthDropdown.js
+++ b/docs-site/src/examples/js/multiMonthDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonthInline.js b/docs-site/src/examples/js/multiMonthInline.js
similarity index 99%
rename from docs-site/src/examples/multiMonthInline.js
rename to docs-site/src/examples/js/multiMonthInline.js
index c612cde763..eece68b1ad 100644
--- a/docs-site/src/examples/multiMonthInline.js
+++ b/docs-site/src/examples/js/multiMonthInline.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/multiMonthPrevious.js b/docs-site/src/examples/js/multiMonthPrevious.js
similarity index 99%
rename from docs-site/src/examples/multiMonthPrevious.js
rename to docs-site/src/examples/js/multiMonthPrevious.js
index b68a657cbd..b6b01e5fa4 100644
--- a/docs-site/src/examples/multiMonthPrevious.js
+++ b/docs-site/src/examples/js/multiMonthPrevious.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/noAnchorArrow.js b/docs-site/src/examples/js/noAnchorArrow.js
similarity index 99%
rename from docs-site/src/examples/noAnchorArrow.js
rename to docs-site/src/examples/js/noAnchorArrow.js
index 0c66e1359b..6a8fa78baf 100644
--- a/docs-site/src/examples/noAnchorArrow.js
+++ b/docs-site/src/examples/js/noAnchorArrow.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       showPopperArrow={false}
diff --git a/docs-site/src/examples/onBlurCallbacks.js b/docs-site/src/examples/js/onBlurCallbacks.js
similarity index 99%
rename from docs-site/src/examples/onBlurCallbacks.js
rename to docs-site/src/examples/js/onBlurCallbacks.js
index 064af8dcf7..3a6c5d445b 100644
--- a/docs-site/src/examples/onBlurCallbacks.js
+++ b/docs-site/src/examples/js/onBlurCallbacks.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   const handleOnBlur = ({ target: { value } }) => {
     const date = new Date(value);
     if (isValid(date)) {
@@ -8,6 +9,7 @@
       console.log("value: %s", date);
     }
   };
+
   return (
     <DatePicker
       key="example9"
diff --git a/docs-site/src/examples/onCalendarOpenStateCallbacks.js b/docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
similarity index 100%
rename from docs-site/src/examples/onCalendarOpenStateCallbacks.js
rename to docs-site/src/examples/js/onCalendarOpenStateCallbacks.js
diff --git a/docs-site/src/examples/openToDate.js b/docs-site/src/examples/js/openToDate.js
similarity index 99%
rename from docs-site/src/examples/openToDate.js
rename to docs-site/src/examples/js/openToDate.js
index a013629ef3..ae843c1cf3 100644
--- a/docs-site/src/examples/openToDate.js
+++ b/docs-site/src/examples/js/openToDate.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/placeholderText.js b/docs-site/src/examples/js/placeholderText.js
similarity index 100%
rename from docs-site/src/examples/placeholderText.js
rename to docs-site/src/examples/js/placeholderText.js
diff --git a/docs-site/src/examples/portal.js b/docs-site/src/examples/js/portal.js
similarity index 99%
rename from docs-site/src/examples/portal.js
rename to docs-site/src/examples/js/portal.js
index bbc323322a..7488d78bf3 100644
--- a/docs-site/src/examples/portal.js
+++ b/docs-site/src/examples/js/portal.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/portalById.js b/docs-site/src/examples/js/portalById.js
similarity index 99%
rename from docs-site/src/examples/portalById.js
rename to docs-site/src/examples/js/portalById.js
index cebf037bda..3bcf13cf7e 100644
--- a/docs-site/src/examples/portalById.js
+++ b/docs-site/src/examples/js/portalById.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/quarterPicker.js b/docs-site/src/examples/js/quarterPicker.js
similarity index 99%
rename from docs-site/src/examples/quarterPicker.js
rename to docs-site/src/examples/js/quarterPicker.js
index 2282145530..15b597855c 100644
--- a/docs-site/src/examples/quarterPicker.js
+++ b/docs-site/src/examples/js/quarterPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/rangeMonthPicker.js b/docs-site/src/examples/js/rangeMonthPicker.js
similarity index 99%
rename from docs-site/src/examples/rangeMonthPicker.js
rename to docs-site/src/examples/js/rangeMonthPicker.js
index 4ecaf1f62a..7138ca40e1 100644
--- a/docs-site/src/examples/rangeMonthPicker.js
+++ b/docs-site/src/examples/js/rangeMonthPicker.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2014/04/08"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/rangeMonthPickerSelectsRange.js b/docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
similarity index 100%
rename from docs-site/src/examples/rangeMonthPickerSelectsRange.js
rename to docs-site/src/examples/js/rangeMonthPickerSelectsRange.js
diff --git a/docs-site/src/examples/rangeQuarterPicker.js b/docs-site/src/examples/js/rangeQuarterPicker.js
similarity index 99%
rename from docs-site/src/examples/rangeQuarterPicker.js
rename to docs-site/src/examples/js/rangeQuarterPicker.js
index 1c96a593fe..8f55f2c5d5 100644
--- a/docs-site/src/examples/rangeQuarterPicker.js
+++ b/docs-site/src/examples/js/rangeQuarterPicker.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2014/07/08"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/rangeQuarterPickerSelectsRange.js b/docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
similarity index 100%
rename from docs-site/src/examples/rangeQuarterPickerSelectsRange.js
rename to docs-site/src/examples/js/rangeQuarterPickerSelectsRange.js
diff --git a/docs-site/src/examples/rangeSwapRange.js b/docs-site/src/examples/js/rangeSwapRange.js
similarity index 99%
rename from docs-site/src/examples/rangeSwapRange.js
rename to docs-site/src/examples/js/rangeSwapRange.js
index d78e30da31..8fe5e3f8d7 100644
--- a/docs-site/src/examples/rangeSwapRange.js
+++ b/docs-site/src/examples/js/rangeSwapRange.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       swapRange
diff --git a/docs-site/src/examples/rangeYearPicker.js b/docs-site/src/examples/js/rangeYearPicker.js
similarity index 99%
rename from docs-site/src/examples/rangeYearPicker.js
rename to docs-site/src/examples/js/rangeYearPicker.js
index 0328cfe123..7eff1e879d 100644
--- a/docs-site/src/examples/rangeYearPicker.js
+++ b/docs-site/src/examples/js/rangeYearPicker.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2014/02/08"));
   const [endDate, setEndDate] = useState(new Date("2024/04/08"));
+
   return (
     <>
       <DatePicker
diff --git a/docs-site/src/examples/rangeYearPickerSelectsRange.js b/docs-site/src/examples/js/rangeYearPickerSelectsRange.js
similarity index 100%
rename from docs-site/src/examples/rangeYearPickerSelectsRange.js
rename to docs-site/src/examples/js/rangeYearPickerSelectsRange.js
diff --git a/docs-site/src/examples/rawChange.js b/docs-site/src/examples/js/rawChange.js
similarity index 99%
rename from docs-site/src/examples/rawChange.js
rename to docs-site/src/examples/js/rawChange.js
index 6d37c40555..f72ae853c3 100644
--- a/docs-site/src/examples/rawChange.js
+++ b/docs-site/src/examples/js/rawChange.js
@@ -1,10 +1,12 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   const handleChangeRaw = (value) => {
     if (value === "tomorrow") {
       setStartDate(addDays(new Date(), 1));
     }
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/readOnly.js b/docs-site/src/examples/js/readOnly.js
similarity index 99%
rename from docs-site/src/examples/readOnly.js
rename to docs-site/src/examples/js/readOnly.js
index 09b65e4a15..44bb59dc66 100644
--- a/docs-site/src/examples/readOnly.js
+++ b/docs-site/src/examples/js/readOnly.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/renderCustomDay.js b/docs-site/src/examples/js/renderCustomDay.js
similarity index 99%
rename from docs-site/src/examples/renderCustomDay.js
rename to docs-site/src/examples/js/renderCustomDay.js
index e3fe960224..bf0e69f0dd 100644
--- a/docs-site/src/examples/renderCustomDay.js
+++ b/docs-site/src/examples/js/renderCustomDay.js
@@ -1,9 +1,11 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const renderDayContents = (day, date) => {
     const tooltipText = `Tooltip for date: ${date}`;
     return <span title={tooltipText}>{getDate(date)}</span>;
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/renderCustomHeader.js b/docs-site/src/examples/js/renderCustomHeader.js
similarity index 91%
rename from docs-site/src/examples/renderCustomHeader.js
rename to docs-site/src/examples/js/renderCustomHeader.js
index d4216c737b..9aa0a239fc 100644
--- a/docs-site/src/examples/renderCustomHeader.js
+++ b/docs-site/src/examples/js/renderCustomHeader.js
@@ -1,7 +1,9 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   const years = range(1990, getYear(new Date()) + 1, 1);
-  const months = [
+
+  const MONTHS = [
     "January",
     "February",
     "March",
@@ -15,6 +17,7 @@
     "November",
     "December",
   ];
+
   return (
     <DatePicker
       renderCustomHeader={({
@@ -48,12 +51,12 @@
           </select>
 
           <select
-            value={months[getMonth(date)]}
+            value={MONTHS[getMonth(date)]}
             onChange={({ target: { value } }) =>
-              changeMonth(months.indexOf(value))
+              changeMonth(MONTHS.indexOf(value))
             }
           >
-            {months.map((option) => (
+            {MONTHS.map((option) => (
               <option key={option} value={option}>
                 {option}
               </option>
diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
similarity index 99%
rename from docs-site/src/examples/renderCustomHeaderTwoMonths.js
rename to docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
index 39e4450674..f5a06e6596 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/js/renderCustomHeaderTwoMonths.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       renderCustomHeader={({
diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/js/renderCustomMonth.js
similarity index 99%
rename from docs-site/src/examples/renderCustomMonth.js
rename to docs-site/src/examples/js/renderCustomMonth.js
index d9ffa17984..1406314e9c 100644
--- a/docs-site/src/examples/renderCustomMonth.js
+++ b/docs-site/src/examples/js/renderCustomMonth.js
@@ -5,6 +5,7 @@
 
     return <span title={tooltipText}>{shortMonth}</span>;
   };
+
   return (
     <DatePicker
       selected={new Date()}
diff --git a/docs-site/src/examples/renderCustomQuarter.js b/docs-site/src/examples/js/renderCustomQuarter.js
similarity index 99%
rename from docs-site/src/examples/renderCustomQuarter.js
rename to docs-site/src/examples/js/renderCustomQuarter.js
index cb73ea62f9..ed16201e56 100644
--- a/docs-site/src/examples/renderCustomQuarter.js
+++ b/docs-site/src/examples/js/renderCustomQuarter.js
@@ -3,6 +3,7 @@
     const tooltipText = `Tooltip for quarter: ${quarter}`;
     return <span title={tooltipText}>{shortQuarter}</span>;
   };
+
   return (
     <DatePicker
       selected={new Date()}
diff --git a/docs-site/src/examples/renderCustomYear.js b/docs-site/src/examples/js/renderCustomYear.js
similarity index 99%
rename from docs-site/src/examples/renderCustomYear.js
rename to docs-site/src/examples/js/renderCustomYear.js
index 044a776e96..694f46f918 100644
--- a/docs-site/src/examples/renderCustomYear.js
+++ b/docs-site/src/examples/js/renderCustomYear.js
@@ -3,6 +3,7 @@
     const tooltipText = `Tooltip for year: ${year}`;
     return <span title={tooltipText}>{year}</span>;
   };
+
   return (
     <DatePicker
       selected={new Date()}
diff --git a/docs-site/src/examples/selectsMultiple.js b/docs-site/src/examples/js/selectsMultiple.js
similarity index 99%
rename from docs-site/src/examples/selectsMultiple.js
rename to docs-site/src/examples/js/selectsMultiple.js
index 4848505590..e9d9873814 100644
--- a/docs-site/src/examples/selectsMultiple.js
+++ b/docs-site/src/examples/js/selectsMultiple.js
@@ -1,8 +1,10 @@
 () => {
   const [selectedDates, setSelectedDates] = useState([new Date()]);
+
   const onChange = (dates) => {
     setSelectedDates(dates);
   };
+
   return (
     <DatePicker
       selectedDates={selectedDates}
diff --git a/docs-site/src/examples/selectsMultipleMonths.js b/docs-site/src/examples/js/selectsMultipleMonths.js
similarity index 99%
rename from docs-site/src/examples/selectsMultipleMonths.js
rename to docs-site/src/examples/js/selectsMultipleMonths.js
index ac2a694a32..796362d69d 100644
--- a/docs-site/src/examples/selectsMultipleMonths.js
+++ b/docs-site/src/examples/js/selectsMultipleMonths.js
@@ -1,8 +1,10 @@
 () => {
   const [selectedDates, setSelectedDates] = useState([new Date()]);
+
   const onChange = (dates) => {
     setSelectedDates(dates);
   };
+
   return (
     <DatePicker
       selectedDates={selectedDates}
diff --git a/docs-site/src/examples/selectsRange.js b/docs-site/src/examples/js/selectsRange.js
similarity index 99%
rename from docs-site/src/examples/selectsRange.js
rename to docs-site/src/examples/js/selectsRange.js
index 5bc0cd1465..c8b0083a08 100644
--- a/docs-site/src/examples/selectsRange.js
+++ b/docs-site/src/examples/js/selectsRange.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/selectsRangeWithDisabledDates.js b/docs-site/src/examples/js/selectsRangeWithDisabledDates.js
similarity index 99%
rename from docs-site/src/examples/selectsRangeWithDisabledDates.js
rename to docs-site/src/examples/js/selectsRangeWithDisabledDates.js
index e776ec1d3a..a87c86ac02 100644
--- a/docs-site/src/examples/selectsRangeWithDisabledDates.js
+++ b/docs-site/src/examples/js/selectsRangeWithDisabledDates.js
@@ -1,11 +1,13 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(null);
+
   const onChange = (dates) => {
     const [start, end] = dates;
     setStartDate(start);
     setEndDate(end);
   };
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/showTime.js b/docs-site/src/examples/js/showTime.js
similarity index 99%
rename from docs-site/src/examples/showTime.js
rename to docs-site/src/examples/js/showTime.js
index 5cb165731b..5ba20dc646 100644
--- a/docs-site/src/examples/showTime.js
+++ b/docs-site/src/examples/js/showTime.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/showTimeOnly.js b/docs-site/src/examples/js/showTimeOnly.js
similarity index 99%
rename from docs-site/src/examples/showTimeOnly.js
rename to docs-site/src/examples/js/showTimeOnly.js
index 875bce1e36..3932e90dd3 100644
--- a/docs-site/src/examples/showTimeOnly.js
+++ b/docs-site/src/examples/js/showTimeOnly.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/specificDateRange.js b/docs-site/src/examples/js/specificDateRange.js
similarity index 99%
rename from docs-site/src/examples/specificDateRange.js
rename to docs-site/src/examples/js/specificDateRange.js
index 1526de88c9..88a15f6369 100644
--- a/docs-site/src/examples/specificDateRange.js
+++ b/docs-site/src/examples/js/specificDateRange.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(null);
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/strictParsing.js b/docs-site/src/examples/js/strictParsing.js
similarity index 99%
rename from docs-site/src/examples/strictParsing.js
rename to docs-site/src/examples/js/strictParsing.js
index e40769fe30..4866bab787 100644
--- a/docs-site/src/examples/strictParsing.js
+++ b/docs-site/src/examples/js/strictParsing.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/tabIndex.js b/docs-site/src/examples/js/tabIndex.js
similarity index 99%
rename from docs-site/src/examples/tabIndex.js
rename to docs-site/src/examples/js/tabIndex.js
index f102c8133d..670fd74467 100644
--- a/docs-site/src/examples/tabIndex.js
+++ b/docs-site/src/examples/js/tabIndex.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/timeInput.js b/docs-site/src/examples/js/timeInput.js
similarity index 99%
rename from docs-site/src/examples/timeInput.js
rename to docs-site/src/examples/js/timeInput.js
index 8059d7bd3a..d43a0ccad0 100644
--- a/docs-site/src/examples/timeInput.js
+++ b/docs-site/src/examples/js/timeInput.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/today.js b/docs-site/src/examples/js/today.js
similarity index 99%
rename from docs-site/src/examples/today.js
rename to docs-site/src/examples/js/today.js
index 2fbd13d77b..33867f6d2c 100644
--- a/docs-site/src/examples/today.js
+++ b/docs-site/src/examples/js/today.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       todayButton="Vandaag"
diff --git a/docs-site/src/examples/toggleCalendarOnIconClick.js b/docs-site/src/examples/js/toggleCalendarOnIconClick.js
similarity index 99%
rename from docs-site/src/examples/toggleCalendarOnIconClick.js
rename to docs-site/src/examples/js/toggleCalendarOnIconClick.js
index aea108c751..b422aef3a6 100644
--- a/docs-site/src/examples/toggleCalendarOnIconClick.js
+++ b/docs-site/src/examples/js/toggleCalendarOnIconClick.js
@@ -1,5 +1,6 @@
 () => {
   const [selectedDate, setSelectedDate] = useState(new Date());
+
   return (
     <DatePicker
       showIcon
diff --git a/docs-site/src/examples/weekNumbers.js b/docs-site/src/examples/js/weekNumbers.js
similarity index 99%
rename from docs-site/src/examples/weekNumbers.js
rename to docs-site/src/examples/js/weekNumbers.js
index 83f1378a17..a8038ad9a0 100644
--- a/docs-site/src/examples/weekNumbers.js
+++ b/docs-site/src/examples/js/weekNumbers.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/weekPicker.js b/docs-site/src/examples/js/weekPicker.js
similarity index 99%
rename from docs-site/src/examples/weekPicker.js
rename to docs-site/src/examples/js/weekPicker.js
index d4fc21c649..18ca5b69f6 100644
--- a/docs-site/src/examples/weekPicker.js
+++ b/docs-site/src/examples/js/weekPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date("2021/02/22"));
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/withPortalById.js b/docs-site/src/examples/js/withPortalById.js
similarity index 99%
rename from docs-site/src/examples/withPortalById.js
rename to docs-site/src/examples/js/withPortalById.js
index d7d6680b54..21f93951e0 100644
--- a/docs-site/src/examples/withPortalById.js
+++ b/docs-site/src/examples/js/withPortalById.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearDropdown.js b/docs-site/src/examples/js/yearDropdown.js
similarity index 99%
rename from docs-site/src/examples/yearDropdown.js
rename to docs-site/src/examples/js/yearDropdown.js
index 5c629b4caa..64eb474da3 100644
--- a/docs-site/src/examples/yearDropdown.js
+++ b/docs-site/src/examples/js/yearDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearItemNumber.js b/docs-site/src/examples/js/yearItemNumber.js
similarity index 99%
rename from docs-site/src/examples/yearItemNumber.js
rename to docs-site/src/examples/js/yearItemNumber.js
index 86052f5916..8cf5c82340 100644
--- a/docs-site/src/examples/yearItemNumber.js
+++ b/docs-site/src/examples/js/yearItemNumber.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearPicker.js b/docs-site/src/examples/js/yearPicker.js
similarity index 99%
rename from docs-site/src/examples/yearPicker.js
rename to docs-site/src/examples/js/yearPicker.js
index a0acb9534b..0c3016f465 100644
--- a/docs-site/src/examples/yearPicker.js
+++ b/docs-site/src/examples/js/yearPicker.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/yearSelectDropdown.js b/docs-site/src/examples/js/yearSelectDropdown.js
similarity index 99%
rename from docs-site/src/examples/yearSelectDropdown.js
rename to docs-site/src/examples/js/yearSelectDropdown.js
index f7e97fa1d6..fa6e9873aa 100644
--- a/docs-site/src/examples/yearSelectDropdown.js
+++ b/docs-site/src/examples/js/yearSelectDropdown.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+
   return (
     <DatePicker
       selected={startDate}
diff --git a/docs-site/src/examples/ts/calendarContainer.ts b/docs-site/src/examples/ts/calendarContainer.ts
new file mode 100644
index 0000000000..bdfe718090
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarContainer.ts
@@ -0,0 +1,30 @@
+const calendarContainerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const MyContainer = ({ className, children }: {className: string, children: ReactNode}) => {
+    return (
+      <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
+        <CalendarContainer className={className}>
+          <div style={{ background: "#f0f0f0" }}>
+            What is your favorite day?
+          </div>
+          <div style={{ position: "relative" }}>{children}</div>
+        </CalendarContainer>
+      </div>
+    );
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      calendarContainer={MyContainer}
+    />
+  );
+}
+
+render(<Example />);
+`;
+
+export default calendarContainerTS;
diff --git a/docs-site/src/examples/ts/calendarIcon.ts b/docs-site/src/examples/ts/calendarIcon.ts
new file mode 100644
index 0000000000..8fc1b37258
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarIcon.ts
@@ -0,0 +1,17 @@
+const calendarIconTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarIconTS;
diff --git a/docs-site/src/examples/ts/calendarIconExternal.ts b/docs-site/src/examples/ts/calendarIconExternal.ts
new file mode 100644
index 0000000000..d3675509dc
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarIconExternal.ts
@@ -0,0 +1,18 @@
+const calendarIconExternalTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      icon="fa fa-calendar"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarIconExternalTS;
diff --git a/docs-site/src/examples/ts/calendarIconSvgIcon.ts b/docs-site/src/examples/ts/calendarIconSvgIcon.ts
new file mode 100644
index 0000000000..0da06a0c04
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarIconSvgIcon.ts
@@ -0,0 +1,40 @@
+const calendarIconSvgIconTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          viewBox="0 0 48 48"
+        >
+          <mask id="ipSApplication0">
+            <g fill="none" stroke="#fff" strokeLinejoin="round" strokeWidth="4">
+              <path strokeLinecap="round" d="M40.04 22v20h-32V22"></path>
+              <path
+                fill="#fff"
+                d="M5.842 13.777C4.312 17.737 7.263 22 11.51 22c3.314 0 6.019-2.686 6.019-6a6 6 0 0 0 6 6h1.018a6 6 0 0 0 6-6c0 3.314 2.706 6 6.02 6c4.248 0 7.201-4.265 5.67-8.228L39.234 6H8.845l-3.003 7.777Z"
+              ></path>
+            </g>
+          </mask>
+          <path
+            fill="currentColor"
+            d="M0 0h48v48H0z"
+            mask="url(#ipSApplication0)"
+          ></path>
+        </svg>
+      }
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarIconSvgIconTS;
diff --git a/docs-site/src/examples/ts/calendarStartDay.ts b/docs-site/src/examples/ts/calendarStartDay.ts
new file mode 100644
index 0000000000..b8d0d7fef2
--- /dev/null
+++ b/docs-site/src/examples/ts/calendarStartDay.ts
@@ -0,0 +1,17 @@
+const calendarStartDayTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      calendarStartDay={3}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default calendarStartDayTS;
diff --git a/docs-site/src/examples/ts/children.ts b/docs-site/src/examples/ts/children.ts
new file mode 100644
index 0000000000..6d75178277
--- /dev/null
+++ b/docs-site/src/examples/ts/children.ts
@@ -0,0 +1,15 @@
+const childrenTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker selected={startDate} onChange={(date: Date | null) => setStartDate(date)}>
+      <div style={{ color: "red" }}>Don't forget to check the weather!</div>
+    </DatePicker>
+  );
+};
+
+render(<Example />);
+`;
+
+export default childrenTS;
diff --git a/docs-site/src/examples/ts/clearInput.ts b/docs-site/src/examples/ts/clearInput.ts
new file mode 100644
index 0000000000..856a097cdc
--- /dev/null
+++ b/docs-site/src/examples/ts/clearInput.ts
@@ -0,0 +1,18 @@
+const clearInputTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      isClearable
+      placeholderText="I have been cleared!"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default clearInputTS;
diff --git a/docs-site/src/examples/ts/closeOnScroll.ts b/docs-site/src/examples/ts/closeOnScroll.ts
new file mode 100644
index 0000000000..043b244031
--- /dev/null
+++ b/docs-site/src/examples/ts/closeOnScroll.ts
@@ -0,0 +1,17 @@
+const closeOnScrollTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      closeOnScroll
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default closeOnScrollTS;
diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.ts b/docs-site/src/examples/ts/closeOnScrollCallback.ts
new file mode 100644
index 0000000000..7d4ef9489e
--- /dev/null
+++ b/docs-site/src/examples/ts/closeOnScrollCallback.ts
@@ -0,0 +1,17 @@
+const closeOnScrollCallbackTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      closeOnScroll={(e: Event): boolean => e.target === document}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default closeOnScrollCallbackTS;
diff --git a/docs-site/src/examples/ts/configureFloatingUI.ts b/docs-site/src/examples/ts/configureFloatingUI.ts
new file mode 100644
index 0000000000..c5afca7a29
--- /dev/null
+++ b/docs-site/src/examples/ts/configureFloatingUI.ts
@@ -0,0 +1,27 @@
+const configureFloatingUIS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      popperClassName="some-custom-class"
+      popperPlacement="top-end"
+      popperModifiers={[
+        {
+          name: "myModifier",
+          fn(state: MiddlewareState) {
+            // Do something with the state
+            return state;
+          },
+        },
+      ]}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default configureFloatingUIS;
diff --git a/docs-site/src/examples/ts/customCalendarClassName.ts b/docs-site/src/examples/ts/customCalendarClassName.ts
new file mode 100644
index 0000000000..e588c285ab
--- /dev/null
+++ b/docs-site/src/examples/ts/customCalendarClassName.ts
@@ -0,0 +1,17 @@
+const CustomCalendarClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      calendarClassName="rasta-stripes"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomCalendarClassNameTS;
diff --git a/docs-site/src/examples/ts/customClassName.ts b/docs-site/src/examples/ts/customClassName.ts
new file mode 100644
index 0000000000..ef6cf8e867
--- /dev/null
+++ b/docs-site/src/examples/ts/customClassName.ts
@@ -0,0 +1,17 @@
+const CustomClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      className="red-border"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomClassNameTS;
diff --git a/docs-site/src/examples/ts/customDateFormat.ts b/docs-site/src/examples/ts/customDateFormat.ts
new file mode 100644
index 0000000000..1ebbe6cfb2
--- /dev/null
+++ b/docs-site/src/examples/ts/customDateFormat.ts
@@ -0,0 +1,17 @@
+const CustomDateFormatTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      dateFormat="yyyy/MM/dd"
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomDateFormatTS;
diff --git a/docs-site/src/examples/ts/customDayClassName.ts b/docs-site/src/examples/ts/customDayClassName.ts
new file mode 100644
index 0000000000..d4db65f670
--- /dev/null
+++ b/docs-site/src/examples/ts/customDayClassName.ts
@@ -0,0 +1,19 @@
+const CustomDayClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dayClassName={(date: Date) =>
+        getDate(date) < Math.random() * 31 ? "random" : undefined
+      }
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomDayClassNameTS;
diff --git a/docs-site/src/examples/ts/customInput.ts b/docs-site/src/examples/ts/customInput.ts
new file mode 100644
index 0000000000..2594f7e88b
--- /dev/null
+++ b/docs-site/src/examples/ts/customInput.ts
@@ -0,0 +1,49 @@
+const customInputTS = `
+type ExampleCustomInputProps = {
+  className?: string;
+  value?: string;
+  onClick?: () => void;
+  onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+  onChange?: (...args: Parameters<Required<DatePickerProps>["onChangeRaw"]>) => void;
+  onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+  id?: ComponentProps<typeof DatePicker>["id"];
+  name?: ComponentProps<typeof DatePicker>["name"];
+  form?: ComponentProps<typeof DatePicker>["form"];
+  autoFocus?: ComponentProps<typeof DatePicker>["autoFocus"];
+  placeholder?: ComponentProps<typeof DatePicker>["placeholderText"];
+  disabled?: ComponentProps<typeof DatePicker>["disabled"];
+  autoComplete?: ComponentProps<typeof DatePicker>["autoComplete"];
+  title?: ComponentProps<typeof DatePicker>["title"];
+  readOnly?: ComponentProps<typeof DatePicker>["readOnly"];
+  required?: ComponentProps<typeof DatePicker>["required"];
+  tabIndex?: ComponentProps<typeof DatePicker>["tabIndex"];
+  "aria-describedby"?: ComponentProps<typeof DatePicker>["ariaDescribedBy"];
+  "aria-invalid"?: ComponentProps<typeof DatePicker>["ariaInvalid"];
+  "aria-labelledby"?: ComponentProps<typeof DatePicker>["ariaLabelledBy"];
+};
+
+const Example = () => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  const ExampleCustomInput = forwardRef<HTMLButtonElement, ExampleCustomInputProps>(
+    ({ value, onClick, className }, ref) => (
+      <button className={className} onClick={onClick} ref={ref}>
+        {value}
+      </button>
+    ),
+  );
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      customInput={<ExampleCustomInput className="example-custom-input" />}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default customInputTS;
diff --git a/docs-site/src/examples/ts/customTimeClassName.ts b/docs-site/src/examples/ts/customTimeClassName.ts
new file mode 100644
index 0000000000..f0027b52e0
--- /dev/null
+++ b/docs-site/src/examples/ts/customTimeClassName.ts
@@ -0,0 +1,22 @@
+const CustomTimeClassNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const handleColor = (time: Date): string => {
+    return time.getHours() > 12 ? "text-success" : "text-error";
+  };
+
+  return (
+    <DatePicker
+      showTimeSelect
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      timeClassName={handleColor}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomTimeClassNameTS;
diff --git a/docs-site/src/examples/ts/customTimeInput.ts b/docs-site/src/examples/ts/customTimeInput.ts
new file mode 100644
index 0000000000..b38d9a37ac
--- /dev/null
+++ b/docs-site/src/examples/ts/customTimeInput.ts
@@ -0,0 +1,34 @@
+const CustomTimeInputTS = `
+
+interface ExampleCustomTimeInputProps {
+  date?: Date;
+  value: string;
+  onChange: (time: string) => void;
+}
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const ExampleCustomTimeInput = ({ value, onChange }: ExampleCustomTimeInputProps) => (
+    <input
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => e.target?.focus()}
+      style={{ border: "solid 1px pink" }}
+    />
+  );
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeInput
+      customTimeInput={<ExampleCustomTimeInput />}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default CustomTimeInputTS;
diff --git a/docs-site/src/examples/ts/dateRange.ts b/docs-site/src/examples/ts/dateRange.ts
new file mode 100644
index 0000000000..e82cf91bd4
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRange.ts
@@ -0,0 +1,30 @@
+const dateRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2014/02/10"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        minDate={startDate}
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default dateRangeTS;
diff --git a/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts b/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
new file mode 100644
index 0000000000..72b3a3c6fe
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRangeInputWithClearButton.ts
@@ -0,0 +1,22 @@
+const DateRangeInputWithClearButtonTS = `
+const Example = () => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const [startDate, endDate] = dateRange;
+
+  return (
+    <DatePicker
+      startDate={startDate}
+      endDate={endDate}
+      onChange={(update: [Date | null, Date | null]) => {
+        setDateRange(update);
+      }}
+      selectsRange
+      isClearable
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DateRangeInputWithClearButtonTS;
diff --git a/docs-site/src/examples/ts/dateRangeWithPortal.ts b/docs-site/src/examples/ts/dateRangeWithPortal.ts
new file mode 100644
index 0000000000..95d13c31dc
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRangeWithPortal.ts
@@ -0,0 +1,22 @@
+const DateRangeWithPortalTS = `
+const Example = () => {
+  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const [startDate, endDate] = dateRange;
+
+  return (
+    <DatePicker
+      startDate={startDate}
+      endDate={endDate}
+      onChange={(update: [Date | null, Date | null]) => {
+        setDateRange(update);
+      }}
+      selectsRange
+      withPortal
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DateRangeWithPortalTS;
diff --git a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
new file mode 100644
index 0000000000..a38423bff9
--- /dev/null
+++ b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.ts
@@ -0,0 +1,30 @@
+const dateRangeWithShowDisabledNavigationTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      minDate={new Date()}
+      maxDate={addMonths(new Date(), 5)}
+      startDate={startDate}
+      endDate={endDate}
+      selectsRange
+      inline
+      showDisabledMonthNavigation
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default dateRangeWithShowDisabledNavigationTS;
diff --git a/docs-site/src/examples/ts/default.ts b/docs-site/src/examples/ts/default.ts
new file mode 100644
index 0000000000..5cbb5e8af0
--- /dev/null
+++ b/docs-site/src/examples/ts/default.ts
@@ -0,0 +1,13 @@
+const defaultTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
+  );
+};
+
+render(<Example />);
+`;
+
+export default defaultTS;
diff --git a/docs-site/src/examples/ts/disabled.ts b/docs-site/src/examples/ts/disabled.ts
new file mode 100644
index 0000000000..0488676599
--- /dev/null
+++ b/docs-site/src/examples/ts/disabled.ts
@@ -0,0 +1,18 @@
+const DisabledTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      disabled
+      placeholderText="This is disabled"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DisabledTS;
diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.ts b/docs-site/src/examples/ts/disabledKeyboardNavigation.ts
new file mode 100644
index 0000000000..ee8733cbdc
--- /dev/null
+++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.ts
@@ -0,0 +1,18 @@
+const DisabledKeyboardNavigationTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      disabledKeyboardNavigation
+      placeholderText="This has disabled keyboard navigation"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DisabledKeyboardNavigationTS;
diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.ts b/docs-site/src/examples/ts/dontCloseOnSelect.ts
new file mode 100644
index 0000000000..f3d144a988
--- /dev/null
+++ b/docs-site/src/examples/ts/dontCloseOnSelect.ts
@@ -0,0 +1,17 @@
+const DontCloseOnSelectTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      shouldCloseOnSelect={false}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default DontCloseOnSelectTS;
diff --git a/docs-site/src/examples/ts/excludeDateIntervals.ts b/docs-site/src/examples/ts/excludeDateIntervals.ts
new file mode 100644
index 0000000000..9d7648139d
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDateIntervals.ts
@@ -0,0 +1,30 @@
+const excludeDateIntervalsTS = `
+type TExcludeDateIntervals = {
+  start: Date;
+  end: Date;
+}[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const excludeDateIntervals: TExcludeDateIntervals = [
+    {
+      start: subDays(new Date(), 5),
+      end: addDays(new Date(), 5)
+    },
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      excludeDateIntervals={excludeDateIntervals}
+      placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDateIntervalsTS;
diff --git a/docs-site/src/examples/ts/excludeDates.ts b/docs-site/src/examples/ts/excludeDates.ts
new file mode 100644
index 0000000000..cfebc66bf1
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDates.ts
@@ -0,0 +1,25 @@
+const excludeDatesTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const excludeDates: TExcludeDates = [new Date(), subDays(new Date(), 1)]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      excludeDates={excludeDates}
+      placeholderText="Select a date other than today or yesterday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesTS;
diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.ts b/docs-site/src/examples/ts/excludeDatesMonthPicker.ts
new file mode 100644
index 0000000000..093cbc0945
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.ts
@@ -0,0 +1,29 @@
+const excludeDatesMonthPickerTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2024-08-01"));
+
+  const excludeDates: TExcludeDates = [
+    new Date("2024-05-01"),
+    new Date("2024-06-01"),
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      excludeDates={excludeDates}
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesMonthPickerTS;
diff --git a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
new file mode 100644
index 0000000000..7e340e1151
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.ts
@@ -0,0 +1,43 @@
+const excludeDatesRangeMonthPickerTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const defaultStartDate = new Date("2024-08-01");
+  const defaultEndDate = new Date("2024-10-01");
+  const [startDate, setStartDate] = useState<Date | null>(defaultStartDate);
+  const [endDate, setEndDate] = useState<Date | null>(defaultEndDate);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  const excludeDates: TExcludeDates = [
+    new Date("2024-05-01"),
+    new Date("2024-02-01"),
+    new Date("2024-01-01"),
+    new Date("2024-11-01"),
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      startDate={startDate}
+      endDate={endDate}
+      onChange={handleChange}
+      excludeDates={excludeDates}
+      dateFormat="MM/yyyy"
+      placeholderText="Select a month other than the disabled months"
+      showMonthYearPicker
+      selectsRange
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesRangeMonthPickerTS;
diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.ts b/docs-site/src/examples/ts/excludeDatesWithMessage.ts
new file mode 100644
index 0000000000..e520e74ab4
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeDatesWithMessage.ts
@@ -0,0 +1,28 @@
+const excludeDatesWithMessageTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const excludeDates: TExcludeDates = [
+    { date: new Date(), message: "Today is excluded" },
+    { date: subDays(new Date(), 1), message: "This day is excluded" },
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      excludeDates={excludeDates}
+      placeholderText="Select a date other than today or yesterday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeDatesWithMessageTS;
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.ts b/docs-site/src/examples/ts/excludeTimePeriod.ts
new file mode 100644
index 0000000000..2aa804f9c7
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeTimePeriod.ts
@@ -0,0 +1,22 @@
+const excludeTimePeriodTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 17),
+  );
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      minTime={setHours(setMinutes(new Date(), 0), 17)}
+      maxTime={setHours(setMinutes(new Date(), 30), 20)}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeTimePeriodTS;
diff --git a/docs-site/src/examples/ts/excludeTimes.ts b/docs-site/src/examples/ts/excludeTimes.ts
new file mode 100644
index 0000000000..2d9aae610d
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeTimes.ts
@@ -0,0 +1,30 @@
+const excludeTimesTS = `
+type TExcludeTimes = Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 16),
+  );
+
+  const excludeTimes: TExcludeTimes = [
+    setHours(setMinutes(new Date(), 0), 17),
+    setHours(setMinutes(new Date(), 30), 18),
+    setHours(setMinutes(new Date(), 30), 19),
+    setHours(setMinutes(new Date(), 30), 17),
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      excludeTimes={excludeTimes}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeTimesTS;
diff --git a/docs-site/src/examples/ts/excludeWeeks.ts b/docs-site/src/examples/ts/excludeWeeks.ts
new file mode 100644
index 0000000000..05e1453bfb
--- /dev/null
+++ b/docs-site/src/examples/ts/excludeWeeks.ts
@@ -0,0 +1,31 @@
+const excludeWeeksTS = `
+type TExcludeDateIntervals = {
+  start: Date;
+  end: Date;
+}[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2021/02/22"));
+
+  const excludeWeeks: TExcludeDateIntervals = [
+    { start: "2021/02/08", end: "2021/02/14" },
+    { start: "2021/01/18", end: "2021/01/24" },
+  ]
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="I/R"
+      locale="en-GB"
+      excludeDateIntervals={excludeWeeks}
+      showWeekNumbers
+      showWeekPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default excludeWeeksTS;
diff --git a/docs-site/src/examples/ts/externalForm.ts b/docs-site/src/examples/ts/externalForm.ts
new file mode 100644
index 0000000000..ef43f561e0
--- /dev/null
+++ b/docs-site/src/examples/ts/externalForm.ts
@@ -0,0 +1,23 @@
+const externalFormTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        required
+        form="external-form"
+      />
+      <form id="external-form">
+        <button type="submit">Submit</button>
+      </form>
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default externalFormTS;
diff --git a/docs-site/src/examples/ts/filterDates.ts b/docs-site/src/examples/ts/filterDates.ts
new file mode 100644
index 0000000000..980504607e
--- /dev/null
+++ b/docs-site/src/examples/ts/filterDates.ts
@@ -0,0 +1,25 @@
+const filterDatesTS = `
+type TFilterDate = (date: Date) => boolean;
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const isWeekday: TFilterDate = (date) => {
+    const day = getDay(date);
+    return day !== 0 && day !== 6;
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      filterDate={isWeekday}
+      placeholderText="Select a weekday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default filterDatesTS;
diff --git a/docs-site/src/examples/ts/filterTimes.ts b/docs-site/src/examples/ts/filterTimes.ts
new file mode 100644
index 0000000000..165f4c3803
--- /dev/null
+++ b/docs-site/src/examples/ts/filterTimes.ts
@@ -0,0 +1,30 @@
+const filterTimesTS = `
+type TFilterTime = (time: Date) => boolean;
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 0), 9),
+  );
+
+  const filterPassedTime: TFilterTime = (time) => {
+    const currentDate = new Date();
+    const selectedDate = new Date(time);
+
+    return currentDate.getTime() < selectedDate.getTime();
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      filterTime={filterPassedTime}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default filterTimesTS;
diff --git a/docs-site/src/examples/ts/fixedCalendar.ts b/docs-site/src/examples/ts/fixedCalendar.ts
new file mode 100644
index 0000000000..a732a7e81b
--- /dev/null
+++ b/docs-site/src/examples/ts/fixedCalendar.ts
@@ -0,0 +1,17 @@
+const fixedCalendarTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      fixedHeight
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default fixedCalendarTS;
diff --git a/docs-site/src/examples/ts/hideTimeCaption.ts b/docs-site/src/examples/ts/hideTimeCaption.ts
new file mode 100644
index 0000000000..a496d0a7c8
--- /dev/null
+++ b/docs-site/src/examples/ts/hideTimeCaption.ts
@@ -0,0 +1,21 @@
+const hideTimeCaptionTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      showTimeSelectOnly
+      timeIntervals={15}
+      dateFormat="h:mm aa"
+      showTimeCaption={false}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default hideTimeCaptionTS;
diff --git a/docs-site/src/examples/ts/highlightDates.ts b/docs-site/src/examples/ts/highlightDates.ts
new file mode 100644
index 0000000000..bec63ab7dd
--- /dev/null
+++ b/docs-site/src/examples/ts/highlightDates.ts
@@ -0,0 +1,29 @@
+const highlightDatesTS = `
+type HighlightDate = {
+  [className: string]: Date[];
+}
+
+type THighlightDates = (Date | HighlightDate)[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const highlightDates: THighlightDates = [
+    subDays(new Date(), 7),
+    addDays(new Date(), 7),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      highlightDates={highlightDates}
+      placeholderText="This highlights a week ago and a week from today"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default highlightDatesTS;
diff --git a/docs-site/src/examples/ts/highlightDatesRanges.ts b/docs-site/src/examples/ts/highlightDatesRanges.ts
new file mode 100644
index 0000000000..591588f90e
--- /dev/null
+++ b/docs-site/src/examples/ts/highlightDatesRanges.ts
@@ -0,0 +1,43 @@
+const highlightDatesRangesTS = `
+type HighlightDate = {
+  [className: string]: Date[];
+}
+
+type THighlightDates = (Date | HighlightDate)[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const highlightWithRanges: THighlightDates = [
+    {
+      "react-datepicker__day--highlighted-custom-1": [
+        subDays(new Date(), 4),
+        subDays(new Date(), 3),
+        subDays(new Date(), 2),
+        subDays(new Date(), 1),
+      ],
+    },
+    {
+      "react-datepicker__day--highlighted-custom-2": [
+        addDays(new Date(), 1),
+        addDays(new Date(), 2),
+        addDays(new Date(), 3),
+        addDays(new Date(), 4),
+      ],
+    },
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      highlightDates={highlightWithRanges}
+      placeholderText="This highlight two ranges with custom classes"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default highlightDatesRangesTS;
diff --git a/docs-site/src/examples/ts/holidayDates.ts b/docs-site/src/examples/ts/holidayDates.ts
new file mode 100644
index 0000000000..5ed02e1959
--- /dev/null
+++ b/docs-site/src/examples/ts/holidayDates.ts
@@ -0,0 +1,31 @@
+const holidayDatesTS = `
+type Holiday = {
+  date: string;
+  holidayName: string;
+}
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const holidays: Holiday[] = [
+    { date: "2023-08-15", holidayName: "India's Independence Day" },
+    { date: "2023-12-31", holidayName: "New Year's Eve" },
+    { date: "2023-12-25", holidayName: "Christmas" },
+    { date: "2024-01-01", holidayName: "New Year's Day" },
+    { date: "2023-11-23", holidayName: "Thanksgiving Day" },
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      holidays={holidays}
+      placeholderText="This display holidays"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default holidayDatesTS;
diff --git a/docs-site/src/examples/ts/includeDateIntervals.ts b/docs-site/src/examples/ts/includeDateIntervals.ts
new file mode 100644
index 0000000000..78496d9964
--- /dev/null
+++ b/docs-site/src/examples/ts/includeDateIntervals.ts
@@ -0,0 +1,27 @@
+const includeDateIntervalsTS = `
+type TIncludeDateIntervals = {
+  start: Date;
+  end: Date;
+}[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const includeDateIntervals: TIncludeDateIntervals = [
+    { start: subDays(new Date(), 5), end: addDays(new Date(), 5) },
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      includeDateIntervals={includeDateIntervals}
+      placeholderText="This only includes dates from 5 days ago to 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeDateIntervalsTS;
diff --git a/docs-site/src/examples/ts/includeDates.ts b/docs-site/src/examples/ts/includeDates.ts
new file mode 100644
index 0000000000..4636ecb28d
--- /dev/null
+++ b/docs-site/src/examples/ts/includeDates.ts
@@ -0,0 +1,24 @@
+const includeDatesTS = `
+type TIncludeDates = Date[];
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const includeDates: TIncludeDates = [
+    new Date(),
+    addDays(new Date(), 1),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      includeDates={includeDates}
+      placeholderText="This only includes today and tomorrow"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeDatesTS;
diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.ts b/docs-site/src/examples/ts/includeDatesMonthPicker.ts
new file mode 100644
index 0000000000..94352c904e
--- /dev/null
+++ b/docs-site/src/examples/ts/includeDatesMonthPicker.ts
@@ -0,0 +1,23 @@
+const includeDatesMonthPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const includeDates: Date[] = [
+    1661990400000, 1664582400000, 1667260800000, 1672531200000,
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      includeDates={includeDates}
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeDatesMonthPickerTS;
diff --git a/docs-site/src/examples/ts/includeTimes.ts b/docs-site/src/examples/ts/includeTimes.ts
new file mode 100644
index 0000000000..00b114625c
--- /dev/null
+++ b/docs-site/src/examples/ts/includeTimes.ts
@@ -0,0 +1,28 @@
+const includeTimesTs = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 16),
+  );
+
+  const includeTimes: Date[] = [
+    setHours(setMinutes(new Date(), 0), 17),
+    setHours(setMinutes(new Date(), 30), 18),
+    setHours(setMinutes(new Date(), 30), 19),
+    setHours(setMinutes(new Date(), 30), 17),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      includeTimes={includeTimes}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default includeTimesTs;
diff --git a/docs-site/src/examples/ts/index.ts b/docs-site/src/examples/ts/index.ts
new file mode 100644
index 0000000000..ca32a16025
--- /dev/null
+++ b/docs-site/src/examples/ts/index.ts
@@ -0,0 +1,106 @@
+export { default as calendarContainerTS } from "./calendarContainer";
+export { default as calendarIconTS } from "./calendarIcon";
+export { default as defaultTS } from "./default";
+export { default as calendarIconSvgIconTS } from "./calendarIconSvgIcon";
+export { default as calendarIconExternalTS } from "./calendarIconExternal";
+export { default as calendarStartDayTS } from "./calendarStartDay";
+export { default as onCalendarOpenStateCallbacksTS } from "./onCalendarOpenStateCallbacks";
+export { default as toggleCalendarOnIconClickTS } from "./toggleCalendarOnIconClick";
+export { default as childrenTS } from "./children";
+export { default as clearInputTS } from "./clearInput";
+export { default as closeOnScrollTS } from "./closeOnScroll";
+export { default as closeOnScrollCallbackTS } from "./closeOnScrollCallback";
+export { default as configureFloatingUIS } from "./configureFloatingUI";
+export { default as customInputTS } from "./customInput";
+export { default as renderCustomHeaderTS } from "./renderCustomHeader";
+export { default as renderCustomHeaderTwoMonthsTS } from "./renderCustomHeaderTwoMonths";
+export { default as renderCustomDayTS } from "./renderCustomDay";
+export { default as renderCustomMonthTS } from "./renderCustomMonth";
+export { default as renderCustomQuarterTS } from "./renderCustomQuarter";
+export { default as renderCustomYearTS } from "./renderCustomYear";
+export { default as customCalendarClassNameTS } from "./customCalendarClassName";
+export { default as customClassNameTS } from "./customClassName";
+export { default as customDayClassNameTS } from "./customDayClassName";
+export { default as customDateFormatTS } from "./customDateFormat";
+export { default as customTimeClassNameTS } from "./customTimeClassName";
+export { default as customTimeInputTS } from "./customTimeInput";
+export { default as dateRangeTS } from "./dateRange";
+export { default as selectsRangeTS } from "./selectsRange";
+export { default as selectsRangeWithDisabledDatesTS } from "./selectsRangeWithDisabledDates";
+export { default as dateRangeWithShowDisabledNavigationTS } from "./dateRangeWithShowDisabledNavigation";
+export { default as dateRangeInputWithClearButtonTS } from "./dateRangeInputWithClearButton";
+export { default as dateRangeWithPortalTS } from "./dateRangeWithPortal";
+export { default as disabledTS } from "./disabled";
+export { default as disabledKeyboardNavigationTS } from "./disabledKeyboardNavigation";
+export { default as weekNumbersTS } from "./weekNumbers";
+export { default as dontCloseOnSelectTS } from "./dontCloseOnSelect";
+export { default as excludeDatesTS } from "./excludeDates";
+export { default as excludeDatesWithMessageTS } from "./excludeDatesWithMessage";
+export { default as excludeDateIntervalsTS } from "./excludeDateIntervals";
+export { default as excludeDatesMonthPickerTS } from "./excludeDatesMonthPicker";
+export { default as excludeDatesRangeMonthPickerTS } from "./excludeDatesRangeMonthPicker";
+export { default as excludeTimesTS } from "./excludeTimes";
+export { default as filterDatesTS } from "./filterDates";
+export { default as filterTimesTS } from "./filterTimes";
+export { default as fixedCalendarTS } from "./fixedCalendar";
+export { default as rawChangeTS } from "./rawChange";
+export { default as highlightDatesTS } from "./highlightDates";
+export { default as highlightDatesRangesTS } from "./highlightDatesRanges";
+export { default as holidayDatesTS } from "./holidayDates";
+export { default as includeDatesTS } from "./includeDates";
+export { default as includeDateIntervalsTS } from "./includeDateIntervals";
+export { default as includeDatesMonthPickerTS } from "./includeDatesMonthPicker";
+export { default as includeTimesTS } from "./includeTimes";
+export { default as injectTimesTS } from "./injectTimes";
+export { default as inlineTS } from "./inline";
+export { default as inlineVisibleTS } from "./inlineVisible";
+export { default as timeInputTS } from "./timeInput";
+export { default as localeTS } from "./locale";
+export { default as localeWithTimeTS } from "./localeWithTime";
+export { default as localeWithoutGlobalVariableTS } from "./localeWithoutGlobalVariable";
+export { default as minDateTS } from "./minDate";
+export { default as maxDateTS } from "./maxDate";
+export { default as monthPickerTS } from "./monthPicker";
+export { default as monthPickerFullNameTS } from "./monthPickerFullName";
+export { default as monthPickerTwoColumnsTS } from "./monthPickerTwoColumns";
+export { default as monthPickerFourColumnsTS } from "./monthPickerFourColumns";
+export { default as monthDropdownTS } from "./monthDropdown";
+export { default as monthDropdownShortTS } from "./monthDropdownShort";
+export { default as monthYearDropdownTS } from "./monthYearDropdown";
+export { default as multiMonthTS } from "./multiMonth";
+export { default as multiMonthDropdownTS } from "./multiMonthDropdown";
+export { default as multiMonthInlineTS } from "./multiMonthInline";
+export { default as noAnchorArrowTS } from "./noAnchorArrow";
+export { default as onBlurCallbacksTS } from "./onBlurCallbacks";
+export { default as openToDateTS } from "./openToDate";
+export { default as placeholderTextTS } from "./placeholderText";
+export { default as portalTS } from "./portal";
+export { default as portalByIdTS } from "./portalById";
+export { default as withPortalByIdTS } from "./withPortalById";
+export { default as quarterPickerTS } from "./quarterPicker";
+export { default as rangeMonthPickerTS } from "./rangeMonthPicker";
+export { default as rangeMonthPickerSelectsRangeTS } from "./rangeMonthPickerSelectsRange";
+export { default as rangeQuarterPickerTS } from "./rangeQuarterPicker";
+export { default as rangeQuarterPickerSelectsRangeTS } from "./rangeQuarterPickerSelectsRange";
+export { default as rangeSwapRangeTS } from "./rangeSwapRange";
+export { default as readOnlyTS } from "./readOnly";
+export { default as showTimeTS } from "./showTime";
+export { default as showTimeOnlyTS } from "./showTimeOnly";
+export { default as hideTimeCaptionTS } from "./hideTimeCaption";
+export { default as multiMonthPreviousTS } from "./multiMonthPrevious";
+export { default as specificDateRangeTS } from "./specificDateRange";
+export { default as excludeTimePeriodTS } from "./excludeTimePeriod";
+export { default as selectsMultipleTS } from "./selectsMultiple";
+export { default as selectsMultipleMonthsTS } from "./selectsMultipleMonths";
+export { default as strictParsingTS } from "./strictParsing";
+export { default as tabIndexTS } from "./tabIndex";
+export { default as todayTS } from "./today";
+export { default as yearPickerTS } from "./yearPicker";
+export { default as rangeYearPickerTS } from "./rangeYearPicker";
+export { default as rangeYearPickerSelectsRangeTS } from "./rangeYearPickerSelectsRange";
+export { default as yearDropdownTS } from "./yearDropdown";
+export { default as yearSelectDropdownTS } from "./yearSelectDropdown";
+export { default as yearItemNumberTS } from "./yearItemNumber";
+export { default as weekPickerTS } from "./weekPicker";
+export { default as excludeWeeksTS } from "./excludeWeeks";
+export { default as externalFormTS } from "./externalForm";
diff --git a/docs-site/src/examples/ts/injectTimes.ts b/docs-site/src/examples/ts/injectTimes.ts
new file mode 100644
index 0000000000..9fc3e8606c
--- /dev/null
+++ b/docs-site/src/examples/ts/injectTimes.ts
@@ -0,0 +1,28 @@
+const injectTimesTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(
+    setHours(setMinutes(new Date(), 30), 16),
+  );
+
+  const injectTimes: Date[] = [
+    setHours(setMinutes(setSeconds(new Date(), 10), 1), 0),
+    setHours(setMinutes(new Date(), 5), 12),
+    setHours(setMinutes(new Date(), 59), 23),
+  ];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      timeFormat="HH:mm:ss"
+      injectTimes={injectTimes}
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default injectTimesTS;
diff --git a/docs-site/src/examples/ts/inline.ts b/docs-site/src/examples/ts/inline.ts
new file mode 100644
index 0000000000..fffdff62e7
--- /dev/null
+++ b/docs-site/src/examples/ts/inline.ts
@@ -0,0 +1,17 @@
+const inlineTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default inlineTS;
diff --git a/docs-site/src/examples/ts/inlineVisible.ts b/docs-site/src/examples/ts/inlineVisible.ts
new file mode 100644
index 0000000000..7f46d2e499
--- /dev/null
+++ b/docs-site/src/examples/ts/inlineVisible.ts
@@ -0,0 +1,31 @@
+const inlineVisibleTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleChange = (e: Date | null) => {
+    setIsOpen(!isOpen);
+    setStartDate(e);
+  };
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <button className="example-custom-input" onClick={handleClick}>
+        {format(startDate, "dd-MM-yyyy")}
+      </button>
+      {isOpen && (
+        <DatePicker selected={startDate} onChange={handleChange} inline />
+      )}
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default inlineVisibleTS;
diff --git a/docs-site/src/examples/ts/locale.ts b/docs-site/src/examples/ts/locale.ts
new file mode 100644
index 0000000000..919133db99
--- /dev/null
+++ b/docs-site/src/examples/ts/locale.ts
@@ -0,0 +1,18 @@
+const localeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale="en-GB"
+      placeholderText="Weeks start on Monday"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default localeTS;
diff --git a/docs-site/src/examples/ts/localeWithTime.ts b/docs-site/src/examples/ts/localeWithTime.ts
new file mode 100644
index 0000000000..a9816fe5b6
--- /dev/null
+++ b/docs-site/src/examples/ts/localeWithTime.ts
@@ -0,0 +1,21 @@
+const localeWithTimeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale="pt-BR"
+      showTimeSelect
+      timeFormat="p"
+      timeIntervals={15}
+      dateFormat="Pp"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default localeWithTimeTS;
diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts b/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
new file mode 100644
index 0000000000..4f4aa06b5e
--- /dev/null
+++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.ts
@@ -0,0 +1,17 @@
+const localeWithoutGlobalVariableTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale={fi}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default localeWithoutGlobalVariableTS;
diff --git a/docs-site/src/examples/ts/maxDate.ts b/docs-site/src/examples/ts/maxDate.ts
new file mode 100644
index 0000000000..31a03fddc8
--- /dev/null
+++ b/docs-site/src/examples/ts/maxDate.ts
@@ -0,0 +1,18 @@
+const maxDateTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      maxDate={addDays(new Date(), 5)}
+      placeholderText="Select a date before 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default maxDateTS;
diff --git a/docs-site/src/examples/ts/minDate.ts b/docs-site/src/examples/ts/minDate.ts
new file mode 100644
index 0000000000..cc58b8b7c1
--- /dev/null
+++ b/docs-site/src/examples/ts/minDate.ts
@@ -0,0 +1,18 @@
+const minDateTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      minDate={subDays(new Date(), 5)}
+      placeholderText="Select a date after 5 days ago"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default minDateTS;
diff --git a/docs-site/src/examples/ts/monthDropdown.ts b/docs-site/src/examples/ts/monthDropdown.ts
new file mode 100644
index 0000000000..e2d898613f
--- /dev/null
+++ b/docs-site/src/examples/ts/monthDropdown.ts
@@ -0,0 +1,17 @@
+const monthDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showMonthDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthDropdownTS;
diff --git a/docs-site/src/examples/ts/monthDropdownShort.ts b/docs-site/src/examples/ts/monthDropdownShort.ts
new file mode 100644
index 0000000000..eb3317bcaf
--- /dev/null
+++ b/docs-site/src/examples/ts/monthDropdownShort.ts
@@ -0,0 +1,18 @@
+const monthDropdownShortTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showMonthDropdown
+      useShortMonthInDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthDropdownShortTS;
diff --git a/docs-site/src/examples/ts/monthPicker.ts b/docs-site/src/examples/ts/monthPicker.ts
new file mode 100644
index 0000000000..87432655b3
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPicker.ts
@@ -0,0 +1,18 @@
+const monthPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerTS;
diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.ts b/docs-site/src/examples/ts/monthPickerFourColumns.ts
new file mode 100644
index 0000000000..2f12abe8b7
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPickerFourColumns.ts
@@ -0,0 +1,20 @@
+const monthPickerFourColumnsTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+      showFourColumnMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerFourColumnsTS;
diff --git a/docs-site/src/examples/ts/monthPickerFullName.ts b/docs-site/src/examples/ts/monthPickerFullName.ts
new file mode 100644
index 0000000000..f37533316d
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPickerFullName.ts
@@ -0,0 +1,19 @@
+const monthPickerFullNameTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerFullNameTS;
diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.ts b/docs-site/src/examples/ts/monthPickerTwoColumns.ts
new file mode 100644
index 0000000000..498948c673
--- /dev/null
+++ b/docs-site/src/examples/ts/monthPickerTwoColumns.ts
@@ -0,0 +1,20 @@
+const monthPickerTwoColumnsTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+      showFullMonthYearPicker
+      showTwoColumnMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthPickerTwoColumnsTS;
diff --git a/docs-site/src/examples/ts/monthYearDropdown.ts b/docs-site/src/examples/ts/monthYearDropdown.ts
new file mode 100644
index 0000000000..907117474e
--- /dev/null
+++ b/docs-site/src/examples/ts/monthYearDropdown.ts
@@ -0,0 +1,20 @@
+const monthYearDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormatCalendar={"MMM yyyy"}
+      minDate={subMonths(new Date(), 6)}
+      maxDate={addMonths(new Date(), 6)}
+      showMonthYearDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default monthYearDropdownTS;
diff --git a/docs-site/src/examples/ts/multiMonth.ts b/docs-site/src/examples/ts/multiMonth.ts
new file mode 100644
index 0000000000..3c39daa295
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonth.ts
@@ -0,0 +1,17 @@
+const multiMonthTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthTS;
diff --git a/docs-site/src/examples/ts/multiMonthDropdown.ts b/docs-site/src/examples/ts/multiMonthDropdown.ts
new file mode 100644
index 0000000000..697090ea90
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonthDropdown.ts
@@ -0,0 +1,18 @@
+const multiMonthDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+      showYearDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthDropdownTS;
diff --git a/docs-site/src/examples/ts/multiMonthInline.ts b/docs-site/src/examples/ts/multiMonthInline.ts
new file mode 100644
index 0000000000..55752c34ed
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonthInline.ts
@@ -0,0 +1,18 @@
+const multiMonthInlineTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthInlineTS;
diff --git a/docs-site/src/examples/ts/multiMonthPrevious.ts b/docs-site/src/examples/ts/multiMonthPrevious.ts
new file mode 100644
index 0000000000..12627cecdb
--- /dev/null
+++ b/docs-site/src/examples/ts/multiMonthPrevious.ts
@@ -0,0 +1,18 @@
+const multiMonthPreviousTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      showPreviousMonths
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default multiMonthPreviousTS;
diff --git a/docs-site/src/examples/ts/noAnchorArrow.ts b/docs-site/src/examples/ts/noAnchorArrow.ts
new file mode 100644
index 0000000000..17dde3a775
--- /dev/null
+++ b/docs-site/src/examples/ts/noAnchorArrow.ts
@@ -0,0 +1,17 @@
+const noAnchorArrowTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showPopperArrow={false}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default noAnchorArrowTS;
diff --git a/docs-site/src/examples/ts/onBlurCallbacks.ts b/docs-site/src/examples/ts/onBlurCallbacks.ts
new file mode 100644
index 0000000000..1059dfc767
--- /dev/null
+++ b/docs-site/src/examples/ts/onBlurCallbacks.ts
@@ -0,0 +1,28 @@
+const onBlurCallbacksTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const handleOnBlur = ({ target: { value } }: React.FocusEvent<HTMLElement>) => {
+    const date = new Date(value);
+    if (isValid(date)) {
+      console.log("date: %s", format(date, "dd/MM/yyyy"));
+    } else {
+      console.log("value: %s", date);
+    }
+  };
+
+  return (
+    <DatePicker
+      key="example9"
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      onBlur={handleOnBlur}
+      placeholderText="View blur callbacks in console"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default onBlurCallbacksTS;
diff --git a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
new file mode 100644
index 0000000000..5b90d15fe8
--- /dev/null
+++ b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.ts
@@ -0,0 +1,21 @@
+const onCalendarOpenStateCallbacksTS = `
+const Example = () => {
+  const [date, setDate] = useState<Date | null>(new Date());
+
+  const handleCalendarClose = () => console.log("Calendar closed");
+  const handleCalendarOpen = () => console.log("Calendar opened");
+
+  return (
+    <DatePicker
+      selected={date}
+      onChange={(date: Date | null) => setDate(date)}
+      onCalendarClose={handleCalendarClose}
+      onCalendarOpen={handleCalendarOpen}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default onCalendarOpenStateCallbacksTS;
diff --git a/docs-site/src/examples/ts/openToDate.ts b/docs-site/src/examples/ts/openToDate.ts
new file mode 100644
index 0000000000..730ffa3083
--- /dev/null
+++ b/docs-site/src/examples/ts/openToDate.ts
@@ -0,0 +1,17 @@
+const openToDateTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      openToDate={new Date("1993/09/28")}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default openToDateTS;
diff --git a/docs-site/src/examples/ts/placeholderText.ts b/docs-site/src/examples/ts/placeholderText.ts
new file mode 100644
index 0000000000..7ac0df4400
--- /dev/null
+++ b/docs-site/src/examples/ts/placeholderText.ts
@@ -0,0 +1,9 @@
+const placeholderTextTS = `
+const Example = () => {
+  return <DatePicker placeholderText="Click to select a date" />;
+};
+
+render(<Example />);
+`;
+
+export default placeholderTextTS;
diff --git a/docs-site/src/examples/ts/portal.ts b/docs-site/src/examples/ts/portal.ts
new file mode 100644
index 0000000000..98763c3300
--- /dev/null
+++ b/docs-site/src/examples/ts/portal.ts
@@ -0,0 +1,17 @@
+const portalTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      withPortal
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default portalTS;
diff --git a/docs-site/src/examples/ts/portalById.ts b/docs-site/src/examples/ts/portalById.ts
new file mode 100644
index 0000000000..9e1463df3b
--- /dev/null
+++ b/docs-site/src/examples/ts/portalById.ts
@@ -0,0 +1,17 @@
+const portalByIdTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      portalId="root-portal"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default portalByIdTS;
diff --git a/docs-site/src/examples/ts/quarterPicker.ts b/docs-site/src/examples/ts/quarterPicker.ts
new file mode 100644
index 0000000000..a5de662e8a
--- /dev/null
+++ b/docs-site/src/examples/ts/quarterPicker.ts
@@ -0,0 +1,18 @@
+const quarterPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="yyyy, QQQ"
+      showQuarterYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default quarterPickerTS;
diff --git a/docs-site/src/examples/ts/rangeMonthPicker.ts b/docs-site/src/examples/ts/rangeMonthPicker.ts
new file mode 100644
index 0000000000..71f589bfd5
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeMonthPicker.ts
@@ -0,0 +1,33 @@
+const rangeMonthPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2014/04/08"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="MM/yyyy"
+        showMonthYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="MM/yyyy"
+        showMonthYearPicker
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeMonthPickerTS;
diff --git a/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
new file mode 100644
index 0000000000..1a562b6cd5
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.ts
@@ -0,0 +1,27 @@
+const rangeMonthPickerSelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="MM/yyyy"
+      showMonthYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeMonthPickerSelectsRangeTS;
diff --git a/docs-site/src/examples/ts/rangeQuarterPicker.ts b/docs-site/src/examples/ts/rangeQuarterPicker.ts
new file mode 100644
index 0000000000..59f5408ca1
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeQuarterPicker.ts
@@ -0,0 +1,33 @@
+const rangeQuarterPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2014/07/08"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy, QQQ"
+        showQuarterYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy, QQQ"
+        showQuarterYearPicker
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeQuarterPickerTS;
diff --git a/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
new file mode 100644
index 0000000000..36f9adfcf9
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.ts
@@ -0,0 +1,27 @@
+const rangeQuarterPickerSelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="yyyy, QQQ"
+      showQuarterYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeQuarterPickerSelectsRangeTS;
diff --git a/docs-site/src/examples/ts/rangeSwapRange.ts b/docs-site/src/examples/ts/rangeSwapRange.ts
new file mode 100644
index 0000000000..207e2275b7
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeSwapRange.ts
@@ -0,0 +1,37 @@
+const rangeSwapRangeTS = `
+type TExcludeDates = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const excludeDates: TExcludeDates = [addDays(new Date(), 1), addDays(new Date(), 5)]
+
+  return (
+    <DatePicker
+      swapRange
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      excludeDates={excludeDates}
+      selectsRange
+      selectsDisabledDaysInRange
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeSwapRangeTS;
diff --git a/docs-site/src/examples/ts/rangeYearPicker.ts b/docs-site/src/examples/ts/rangeYearPicker.ts
new file mode 100644
index 0000000000..b20ac57b48
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeYearPicker.ts
@@ -0,0 +1,33 @@
+const rangeYearPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(new Date("2024/04/08"));
+
+  return (
+    <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date: Date | null) => setStartDate(date)}
+        selectsStart
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy"
+        showYearPicker
+      />
+      <DatePicker
+        selected={endDate}
+        onChange={(date: Date | null) => setEndDate(date)}
+        selectsEnd
+        startDate={startDate}
+        endDate={endDate}
+        dateFormat="yyyy"
+        showYearPicker
+      />
+    </>
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeYearPickerTS;
diff --git a/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
new file mode 100644
index 0000000000..1294b1ad3e
--- /dev/null
+++ b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.ts
@@ -0,0 +1,27 @@
+const rangeYearPickerSelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2014/02/08"));
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const handleChange = ([newStartDate, newEndDate]: [Date | null, Date | null]) => {
+    setStartDate(newStartDate);
+    setEndDate(newEndDate);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={handleChange}
+      selectsRange
+      startDate={startDate}
+      endDate={endDate}
+      dateFormat="yyyy"
+      showYearPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rangeYearPickerSelectsRangeTS;
diff --git a/docs-site/src/examples/ts/rawChange.ts b/docs-site/src/examples/ts/rawChange.ts
new file mode 100644
index 0000000000..acca77166f
--- /dev/null
+++ b/docs-site/src/examples/ts/rawChange.ts
@@ -0,0 +1,24 @@
+const rawChangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  const handleChangeRaw = (value: string) => {
+    if (value === "tomorrow") {
+      setStartDate(addDays(new Date(), 1));
+    }
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      placeholderText='Enter "tomorrow"'
+      onChangeRaw={(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => handleChangeRaw(event.target.value)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default rawChangeTS;
diff --git a/docs-site/src/examples/ts/readOnly.ts b/docs-site/src/examples/ts/readOnly.ts
new file mode 100644
index 0000000000..ab91fe18fb
--- /dev/null
+++ b/docs-site/src/examples/ts/readOnly.ts
@@ -0,0 +1,18 @@
+const readOnlyTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      placeholderText="This is readOnly"
+      readOnly
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default readOnlyTS;
diff --git a/docs-site/src/examples/ts/renderCustomDay.ts b/docs-site/src/examples/ts/renderCustomDay.ts
new file mode 100644
index 0000000000..d916f92a05
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomDay.ts
@@ -0,0 +1,23 @@
+const RenderCustomDayTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  const renderDayContents = (day: number, date: Date): React.ReactNode => {
+    const tooltipText = \`Tooltip for date: \${date}\`;
+
+    return <span title={tooltipText}>{getDate(date)}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      renderDayContents={renderDayContents}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomDayTS;
diff --git a/docs-site/src/examples/ts/renderCustomHeader.ts b/docs-site/src/examples/ts/renderCustomHeader.ts
new file mode 100644
index 0000000000..2d00577f0e
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomHeader.ts
@@ -0,0 +1,85 @@
+const renderCustomHeaderTS = `
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+] as const;
+
+const years = range(1990, getYear(new Date()) + 1, 1);
+
+const CustomHeader = ({
+  date,
+  changeYear,
+  changeMonth,
+  decreaseMonth,
+  increaseMonth,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+}: ReactDatePickerCustomHeaderProps) => (
+  <div
+    style={{
+      margin: 10,
+      display: "flex",
+      justifyContent: "center",
+    }}
+  >
+    <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+      {"<"}
+    </button>
+    <select
+      value={getYear(date)}
+      onChange={({ target: { value } }) => changeYear(value)}
+    >
+      {years.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+
+    <select
+      value={MONTHS[getMonth(date)]}
+      onChange={({ target: { value } }) =>
+        changeMonth(MONTHS.indexOf(value))
+      }
+    >
+      {MONTHS.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+
+    <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+      {">"}
+    </button>
+  </div>
+);
+
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      renderCustomHeader={CustomHeader}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default renderCustomHeaderTS;
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
new file mode 100644
index 0000000000..4790ea38f7
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.ts
@@ -0,0 +1,67 @@
+const renderCustomHeaderTwoMonthsTS = `
+
+const CustomHeader = ({
+  monthDate,
+  customHeaderCount,
+  decreaseMonth,
+  increaseMonth,
+}: ReactDatePickerCustomHeaderProps) => (
+  <div>
+    <button
+      aria-label="Previous Month"
+      className={
+        "react-datepicker__navigation react-datepicker__navigation--previous"
+      }
+      style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
+      onClick={decreaseMonth}
+    >
+      <span
+        className={
+          "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
+        }
+      >
+        {"<"}
+      </span>
+    </button>
+    <span className="react-datepicker__current-month">
+      {monthDate.toLocaleString("en-US", {
+        month: "long",
+        year: "numeric",
+      })}
+    </span>
+    <button
+      aria-label="Next Month"
+      className={
+        "react-datepicker__navigation react-datepicker__navigation--next"
+      }
+      style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
+      onClick={increaseMonth}
+    >
+      <span
+        className={
+          "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
+        }
+      >
+        {">"}
+      </span>
+    </button>
+  </div>
+);
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      renderCustomHeader={CustomHeader}
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      monthsShown={2}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default renderCustomHeaderTwoMonthsTS;
diff --git a/docs-site/src/examples/ts/renderCustomMonth.ts b/docs-site/src/examples/ts/renderCustomMonth.ts
new file mode 100644
index 0000000000..cc98f93f46
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomMonth.ts
@@ -0,0 +1,23 @@
+const RenderCustomMonthTS = `
+const Example = () => {
+  const renderMonthContent = (month: number, shortMonth: string, longMonth: string, day: Date): React.ReactNode => {
+    const fullYear = new Date(day).getFullYear();
+    const tooltipText = \`Tooltip for month: \${longMonth} \${fullYear}\`;
+
+    return <span title={tooltipText}>{shortMonth}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderMonthContent={renderMonthContent}
+      showMonthYearPicker
+      dateFormat="MM/yyyy"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomMonthTS;
diff --git a/docs-site/src/examples/ts/renderCustomQuarter.ts b/docs-site/src/examples/ts/renderCustomQuarter.ts
new file mode 100644
index 0000000000..cf29164e39
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomQuarter.ts
@@ -0,0 +1,22 @@
+const RenderCustomQuarterTS = `
+const Example = () => {
+  const renderQuarterContent = (quarter: number, shortQuarter: string): React.ReactNode => {
+    const tooltipText = \`Tooltip for quarter: \${quarter}\`;
+
+    return <span title={tooltipText}>{shortQuarter}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderQuarterContent={renderQuarterContent}
+      showQuarterYearPicker
+      dateFormat="yyyy, QQQ"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomQuarterTS;
diff --git a/docs-site/src/examples/ts/renderCustomYear.ts b/docs-site/src/examples/ts/renderCustomYear.ts
new file mode 100644
index 0000000000..90c13e2607
--- /dev/null
+++ b/docs-site/src/examples/ts/renderCustomYear.ts
@@ -0,0 +1,21 @@
+const RenderCustomYearTS = `
+const Example = () => {
+  const renderYearContent = (year: number): React.ReactNode => {
+    const tooltipText = \`Tooltip for year: \${year}\`;
+    return <span title={tooltipText}>{year}</span>;
+  };
+
+  return (
+    <DatePicker
+      selected={new Date()}
+      renderYearContent={renderYearContent}
+      showYearPicker
+      dateFormat="yyyy"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default RenderCustomYearTS;
diff --git a/docs-site/src/examples/ts/selectsMultiple.ts b/docs-site/src/examples/ts/selectsMultiple.ts
new file mode 100644
index 0000000000..70d228af44
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsMultiple.ts
@@ -0,0 +1,23 @@
+const selectsMultipleTS = `
+const Example = () => {
+  const [selectedDates, setSelectedDates] = useState<Date[] | null>([new Date()]);
+
+  const onChange = (dates: Date[] | null) => {
+    setSelectedDates(dates);
+  };
+
+  return (
+    <DatePicker
+      selectedDates={selectedDates}
+      selectsMultiple
+      onChange={onChange}
+      shouldCloseOnSelect={false}
+      disabledKeyboardNavigation
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default selectsMultipleTS;
diff --git a/docs-site/src/examples/ts/selectsMultipleMonths.ts b/docs-site/src/examples/ts/selectsMultipleMonths.ts
new file mode 100644
index 0000000000..e9f2974b63
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsMultipleMonths.ts
@@ -0,0 +1,25 @@
+const selectsMultipleMonthsTS = `
+const Example = () => {
+  const [selectedDates, setSelectedDates] = useState<Date[] | null>(null);
+
+  const onChange = (dates: Date[] | null) => {
+    setSelectedDates(dates);
+  };
+
+  return (
+    <DatePicker
+      selectedDates={selectedDates}
+      selectsMultiple
+      showMonthYearPicker
+      show
+      onChange={onChange}
+      shouldCloseOnSelect={false}
+      disabledKeyboardNavigation
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default selectsMultipleMonthsTS;
diff --git a/docs-site/src/examples/ts/selectsRange.ts b/docs-site/src/examples/ts/selectsRange.ts
new file mode 100644
index 0000000000..2297a0eb01
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsRange.ts
@@ -0,0 +1,27 @@
+const SelectsRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      selectsRange
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default SelectsRangeTS;
diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
new file mode 100644
index 0000000000..3cf6de92c4
--- /dev/null
+++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.ts
@@ -0,0 +1,36 @@
+const SelectsRangeWithDisabledDatesTS = `
+type TExcludeDate = {
+  date: Date;
+  message?: string;
+}[] | Date[];
+
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const onChange = (dates: [Date | null, Date | null]) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+
+  const excludeDates: TExcludeDate = [addDays(new Date(), 1), addDays(new Date(), 5)];
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={onChange}
+      startDate={startDate}
+      endDate={endDate}
+      excludeDates={excludeDates}
+      selectsRange
+      selectsDisabledDaysInRange
+      inline
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default SelectsRangeWithDisabledDatesTS;
diff --git a/docs-site/src/examples/ts/showTime.ts b/docs-site/src/examples/ts/showTime.ts
new file mode 100644
index 0000000000..ea86f0a7b6
--- /dev/null
+++ b/docs-site/src/examples/ts/showTime.ts
@@ -0,0 +1,21 @@
+const showTimeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      timeFormat="HH:mm"
+      timeIntervals={15}
+      timeCaption="time"
+      dateFormat="MMMM d, yyyy h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default showTimeTS;
diff --git a/docs-site/src/examples/ts/showTimeOnly.ts b/docs-site/src/examples/ts/showTimeOnly.ts
new file mode 100644
index 0000000000..4014d1a187
--- /dev/null
+++ b/docs-site/src/examples/ts/showTimeOnly.ts
@@ -0,0 +1,21 @@
+const showTimeReadonlyTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showTimeSelect
+      showTimeSelectOnly
+      timeIntervals={15}
+      timeCaption="Time"
+      dateFormat="h:mm aa"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default showTimeReadonlyTS;
diff --git a/docs-site/src/examples/ts/specificDateRange.ts b/docs-site/src/examples/ts/specificDateRange.ts
new file mode 100644
index 0000000000..91fef2b380
--- /dev/null
+++ b/docs-site/src/examples/ts/specificDateRange.ts
@@ -0,0 +1,19 @@
+const specificDateRangeTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(null);
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      minDate={new Date()}
+      maxDate={addDays(new Date(), 5)}
+      placeholderText="Select a date between today and 5 days in the future"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default specificDateRangeTS;
diff --git a/docs-site/src/examples/ts/strictParsing.ts b/docs-site/src/examples/ts/strictParsing.ts
new file mode 100644
index 0000000000..196de886e0
--- /dev/null
+++ b/docs-site/src/examples/ts/strictParsing.ts
@@ -0,0 +1,17 @@
+const strictParsingTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      strictParsing
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default strictParsingTS;
diff --git a/docs-site/src/examples/ts/tabIndex.ts b/docs-site/src/examples/ts/tabIndex.ts
new file mode 100644
index 0000000000..336841df74
--- /dev/null
+++ b/docs-site/src/examples/ts/tabIndex.ts
@@ -0,0 +1,17 @@
+const tabIndexTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={setStartDate}
+      tabIndex={1}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default tabIndexTS;
diff --git a/docs-site/src/examples/ts/timeInput.ts b/docs-site/src/examples/ts/timeInput.ts
new file mode 100644
index 0000000000..ce5e55d07b
--- /dev/null
+++ b/docs-site/src/examples/ts/timeInput.ts
@@ -0,0 +1,19 @@
+const timeInputTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      timeInputLabel="Time:"
+      dateFormat="MM/dd/yyyy h:mm aa"
+      showTimeInput
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default timeInputTS;
diff --git a/docs-site/src/examples/ts/today.ts b/docs-site/src/examples/ts/today.ts
new file mode 100644
index 0000000000..a671e0e7fc
--- /dev/null
+++ b/docs-site/src/examples/ts/today.ts
@@ -0,0 +1,17 @@
+const todayTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      todayButton="Vandaag"
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default todayTS;
diff --git a/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts b/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
new file mode 100644
index 0000000000..6e67c2d3f8
--- /dev/null
+++ b/docs-site/src/examples/ts/toggleCalendarOnIconClick.ts
@@ -0,0 +1,18 @@
+const toggleCalendarOnIconClickTS = `
+const Example = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      showIcon
+      toggleCalendarOnIconClick
+      selected={selectedDate}
+      onChange={(date: Date | null) => setSelectedDate(date)}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default toggleCalendarOnIconClickTS;
diff --git a/docs-site/src/examples/ts/weekNumbers.ts b/docs-site/src/examples/ts/weekNumbers.ts
new file mode 100644
index 0000000000..1abd11a4c8
--- /dev/null
+++ b/docs-site/src/examples/ts/weekNumbers.ts
@@ -0,0 +1,18 @@
+const WeekNumbersTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      locale="en-GB"
+      showWeekNumbers
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default WeekNumbersTS;
diff --git a/docs-site/src/examples/ts/weekPicker.ts b/docs-site/src/examples/ts/weekPicker.ts
new file mode 100644
index 0000000000..cb944bca36
--- /dev/null
+++ b/docs-site/src/examples/ts/weekPicker.ts
@@ -0,0 +1,20 @@
+const weekPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date("2021/02/22"));
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      dateFormat="I/R"
+      locale="en-GB"
+      showWeekNumbers
+      showWeekPicker
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default weekPickerTS;
diff --git a/docs-site/src/examples/ts/withPortalById.ts b/docs-site/src/examples/ts/withPortalById.ts
new file mode 100644
index 0000000000..20486bb41b
--- /dev/null
+++ b/docs-site/src/examples/ts/withPortalById.ts
@@ -0,0 +1,18 @@
+const withPortalByIdTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      withPortal
+      portalId="root-portal"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default withPortalByIdTS;
diff --git a/docs-site/src/examples/ts/yearDropdown.ts b/docs-site/src/examples/ts/yearDropdown.ts
new file mode 100644
index 0000000000..e5d336abdf
--- /dev/null
+++ b/docs-site/src/examples/ts/yearDropdown.ts
@@ -0,0 +1,20 @@
+const yearDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showYearDropdown
+      dateFormatCalendar="MMMM"
+      yearDropdownItemNumber={15}
+      scrollableYearDropdown
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearDropdownTS;
diff --git a/docs-site/src/examples/ts/yearItemNumber.ts b/docs-site/src/examples/ts/yearItemNumber.ts
new file mode 100644
index 0000000000..b468b90dc7
--- /dev/null
+++ b/docs-site/src/examples/ts/yearItemNumber.ts
@@ -0,0 +1,19 @@
+const yearItemNumberTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showYearPicker
+      dateFormat="yyyy"
+      yearItemNumber={9}
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearItemNumberTS;
diff --git a/docs-site/src/examples/ts/yearPicker.ts b/docs-site/src/examples/ts/yearPicker.ts
new file mode 100644
index 0000000000..caecdcb7a5
--- /dev/null
+++ b/docs-site/src/examples/ts/yearPicker.ts
@@ -0,0 +1,18 @@
+const yearPickerTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      showYearPicker
+      dateFormat="yyyy"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearPickerTS;
diff --git a/docs-site/src/examples/ts/yearSelectDropdown.ts b/docs-site/src/examples/ts/yearSelectDropdown.ts
new file mode 100644
index 0000000000..8f140400b1
--- /dev/null
+++ b/docs-site/src/examples/ts/yearSelectDropdown.ts
@@ -0,0 +1,20 @@
+const yearSelectDropdownTS = `
+const Example = () => {
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={startDate}
+      onChange={(date: Date | null) => setStartDate(date)}
+      peekNextMonth
+      showMonthDropdown
+      showYearDropdown
+      dropdownMode="select"
+    />
+  );
+};
+
+render(<Example />);
+`;
+
+export default yearSelectDropdownTS;
diff --git a/docs-site/src/index.jsx b/docs-site/src/index.tsx
similarity index 55%
rename from docs-site/src/index.jsx
rename to docs-site/src/index.tsx
index f50634d567..3b2f90aac6 100644
--- a/docs-site/src/index.jsx
+++ b/docs-site/src/index.tsx
@@ -1,5 +1,7 @@
 import ReactDOM from "react-dom/client";
 import App from "./components/App";
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement,
+);
 root.render(<App />);
diff --git a/docs-site/src/types/global.d.ts b/docs-site/src/types/global.d.ts
new file mode 100644
index 0000000000..c9de3efe9c
--- /dev/null
+++ b/docs-site/src/types/global.d.ts
@@ -0,0 +1,9 @@
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*?raw" {
+  const content: string;
+  export default content;
+}
diff --git a/docs-site/src/types/index.ts b/docs-site/src/types/index.ts
new file mode 100644
index 0000000000..0e2366c7c7
--- /dev/null
+++ b/docs-site/src/types/index.ts
@@ -0,0 +1,6 @@
+export interface IExampleConfig {
+  title: string;
+  component: string;
+  componentTS?: string;
+  description?: string | React.ReactElement;
+}
diff --git a/docs-site/tsconfig.json b/docs-site/tsconfig.json
new file mode 100644
index 0000000000..42a14a6e38
--- /dev/null
+++ b/docs-site/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/docs-site/tsconfig.node.json b/docs-site/tsconfig.node.json
new file mode 100644
index 0000000000..42872c59f5
--- /dev/null
+++ b/docs-site/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/docs-site/vite.config.js b/docs-site/vite.config.ts
similarity index 100%
rename from docs-site/vite.config.js
rename to docs-site/vite.config.ts
diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock
index 7bd8fadc5d..d94e6e5672 100644
--- a/docs-site/yarn.lock
+++ b/docs-site/yarn.lock
@@ -524,7 +524,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/eslint-utils@npm:^4.4.0":
+  version: 4.6.1
+  resolution: "@eslint-community/eslint-utils@npm:4.6.1"
+  dependencies:
+    eslint-visitor-keys: "npm:^3.4.3"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10c0/cdeb6f8fc33a83726357d7f736075cdbd6e79dc7ac4b00b15680f1111d0f33bda583e7fafa5937245a058cc66302dc47568bba57b251302dc74964d8e87f56d7
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1":
   version: 4.12.1
   resolution: "@eslint-community/regexpp@npm:4.12.1"
   checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6
@@ -794,6 +805,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10c0/732c3b6d1b1e967440e65f284bd06e5821fedf10a1bea9ed2bb75956ea1f30e08c44d3def9d6a230666574edbaf136f8cfd319c14fd1f87c66e6a44449afb2eb
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10c0/88dafe5e3e29a388b07264680dc996c17f4bda48d163a9d4f5c1112979f0ce8ec72aa7116122c350b4e7976bc5566dc3ddb579be1ceaacc727872eb4ed93926d
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10c0/db9de047c3bb9b51f9335a7bb46f4fcfb6829fb628318c12115fbaf7d369bfce71c15b103d1fc3b464812d936220ee9bc1c8f762d032c9f6be9acc99249095b1
+  languageName: node
+  linkType: hard
+
 "@npmcli/agent@npm:^2.0.0":
   version: 2.2.2
   resolution: "@npmcli/agent@npm:2.2.2"
@@ -1159,6 +1197,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4.17.11":
+  version: 4.17.16
+  resolution: "@types/lodash@npm:4.17.16"
+  checksum: 10c0/cf017901b8ab1d7aabc86d5189d9288f4f99f19a75caf020c0e2c77b8d4cead4db0d0b842d009b029339f92399f49f34377dd7c2721053388f251778b4c23534
+  languageName: node
+  linkType: hard
+
 "@types/prismjs@npm:^1.26.0":
   version: 1.26.3
   resolution: "@types/prismjs@npm:1.26.3"
@@ -1184,6 +1229,124 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:^7.0.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.18.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/type-utils": "npm:7.18.0"
+    "@typescript-eslint/utils": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.3.1"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^7.0.0
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/2b37948fa1b0dab77138909dabef242a4d49ab93e4019d4ef930626f0a7d96b03e696cd027fa0087881c20e73be7be77c942606b4a76fa599e6b37f6985304c3
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:^7.0.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/parser@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/370e73fca4278091bc1b657f85e7d74cd52b24257ea20c927a8e17546107ce04fbf313fec99aed0cc2a145ddbae1d3b12e9cc2c1320117636dc1281bcfd08059
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/scope-manager@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+  checksum: 10c0/038cd58c2271de146b3a594afe2c99290034033326d57ff1f902976022c8b0138ffd3cb893ae439ae41003b5e4bcc00cabf6b244ce40e8668f9412cc96d97b8e
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/type-utils@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+    "@typescript-eslint/utils": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/ad92a38007be620f3f7036f10e234abdc2fdc518787b5a7227e55fd12896dacf56e8b34578723fbf9bea8128df2510ba8eb6739439a3879eda9519476d5783fd
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/types@npm:7.18.0"
+  checksum: 10c0/eb7371ac55ca77db8e59ba0310b41a74523f17e06f485a0ef819491bc3dd8909bb930120ff7d30aaf54e888167e0005aa1337011f3663dc90fb19203ce478054
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/typescript-estree@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/0c7f109a2e460ec8a1524339479cf78ff17814d23c83aa5112c77fb345e87b3642616291908dcddea1e671da63686403dfb712e4a4435104f92abdfddf9aba81
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/utils@npm:7.18.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/visitor-keys@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    eslint-visitor-keys: "npm:^3.4.3"
+  checksum: 10c0/538b645f8ff1d9debf264865c69a317074eaff0255e63d7407046176b0f6a6beba34a6c51d511f12444bae12a98c69891eb6f403c9f54c6c2e2849d1c1cb73c0
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:^4.4.1":
   version: 4.4.1
   resolution: "@vitejs/plugin-react@npm:4.4.1"
@@ -1346,6 +1509,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array-union@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "array-union@npm:2.1.0"
+  checksum: 10c0/429897e68110374f39b771ec47a7161fc6a8fc33e196857c0a396dc75df0b5f65e4d046674db764330b6bb66b39ef48dd7c53b6a2ee75cfb0681e0c1a7033962
+  languageName: node
+  linkType: hard
+
 "array.prototype.findlast@npm:^1.2.5":
   version: 1.2.5
   resolution: "array.prototype.findlast@npm:1.2.5"
@@ -1454,7 +1624,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.2":
+"braces@npm:^3.0.2, braces@npm:^3.0.3":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -1811,6 +1981,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dir-glob@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "dir-glob@npm:3.0.1"
+  dependencies:
+    path-type: "npm:^4.0.0"
+  checksum: 10c0/dcac00920a4d503e38bb64001acb19df4efc14536ada475725e12f52c16777afdee4db827f55f13a908ee7efc0cb282e2e3dbaeeb98c0993dd93d1802d3bf00c
+  languageName: node
+  linkType: hard
+
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -2265,6 +2444,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-visitor-keys@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820
+  languageName: node
+  linkType: hard
+
 "eslint-visitor-keys@npm:^4.2.0":
   version: 4.2.0
   resolution: "eslint-visitor-keys@npm:4.2.0"
@@ -2379,6 +2565,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-glob@npm:^3.2.9":
+  version: 3.3.3
+  resolution: "fast-glob@npm:3.3.3"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.8"
+  checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe
+  languageName: node
+  linkType: hard
+
 "fast-json-stable-stringify@npm:^2.0.0":
   version: 2.1.0
   resolution: "fast-json-stable-stringify@npm:2.1.0"
@@ -2393,6 +2592,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fastq@npm:^1.6.0":
+  version: 1.19.1
+  resolution: "fastq@npm:1.19.1"
+  dependencies:
+    reusify: "npm:^1.0.4"
+  checksum: 10c0/ebc6e50ac7048daaeb8e64522a1ea7a26e92b3cee5cd1c7f2316cdca81ba543aa40a136b53891446ea5c3a67ec215fbaca87ad405f102dd97012f62916905630
+  languageName: node
+  linkType: hard
+
 "fdir@npm:^6.4.3":
   version: 6.4.3
   resolution: "fdir@npm:6.4.3"
@@ -2671,6 +2879,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"glob-parent@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "glob-parent@npm:5.1.2"
+  dependencies:
+    is-glob: "npm:^4.0.1"
+  checksum: 10c0/cab87638e2112bee3f839ef5f6e0765057163d39c66be8ec1602f3823da4692297ad4e972de876ea17c44d652978638d2fd583c6713d0eb6591706825020c9ee
+  languageName: node
+  linkType: hard
+
 "glob-parent@npm:^6.0.2":
   version: 6.0.2
   resolution: "glob-parent@npm:6.0.2"
@@ -2751,6 +2968,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "globby@npm:11.1.0"
+  dependencies:
+    array-union: "npm:^2.1.0"
+    dir-glob: "npm:^3.0.1"
+    fast-glob: "npm:^3.2.9"
+    ignore: "npm:^5.2.0"
+    merge2: "npm:^1.4.1"
+    slash: "npm:^3.0.0"
+  checksum: 10c0/b39511b4afe4bd8a7aead3a27c4ade2b9968649abab0a6c28b1a90141b96ca68ca5db1302f7c7bd29eab66bf51e13916b8e0a3d0ac08f75e1e84a39b35691189
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -2774,6 +3005,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: 10c0/e951259d8cd2e0d196c72ec711add7115d42eb9a8146c8eeda5b8d3ac91e5dd816b9cd68920726d9fd4490368e7ed86e9c423f40db87e2d8dfafa00fa17c3a31
+  languageName: node
+  linkType: hard
+
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -2922,6 +3160,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^5.0.2":
   version: 5.0.2
   resolution: "immutable@npm:5.0.2"
@@ -3138,7 +3383,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.3":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -3593,6 +3838,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "merge2@npm:1.4.1"
+  checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
@@ -3603,6 +3855,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromatch@npm:^4.0.8":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
+  dependencies:
+    braces: "npm:^3.0.3"
+    picomatch: "npm:^2.3.1"
+  checksum: 10c0/166fa6eb926b9553f32ef81f5f531d27b4ce7da60e5baf8c021d043b27a388fb95e46a8038d5045877881e673f8134122b59624d5cecbd16eb50a42e7a6b5ca8
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^3.1.2":
   version: 3.1.2
   resolution: "minimatch@npm:3.1.2"
@@ -4028,6 +4290,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-type@npm:4.0.0"
+  checksum: 10c0/666f6973f332f27581371efaf303fd6c272cc43c2057b37aa99e3643158c7e4b2626549555d88626e99ea9e046f82f32e41bbde5f1508547e9a11b149b52387c
+  languageName: node
+  linkType: hard
+
 "picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"
@@ -4147,13 +4416,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"queue-microtask@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "queue-microtask@npm:1.2.3"
+  checksum: 10c0/900a93d3cdae3acd7d16f642c29a642aea32c2026446151f0778c62ac089d4b8e6c986811076e1ae180a694cedf077d453a11b58ff0a865629a4f82ab558e102
+  languageName: node
+  linkType: hard
+
 "react-datepicker-docs@workspace:.":
   version: 0.0.0-use.local
   resolution: "react-datepicker-docs@workspace:."
   dependencies:
     "@eslint/js": "npm:^9.25.0"
+    "@types/lodash": "npm:^4.17.11"
     "@types/react": "npm:^19.1.2"
     "@types/react-dom": "npm:^19.1.2"
+    "@typescript-eslint/eslint-plugin": "npm:^7.0.0"
+    "@typescript-eslint/parser": "npm:^7.0.0"
     "@vitejs/plugin-react": "npm:^4.4.1"
     date-fns: "npm:^4.1.0"
     eslint: "npm:^9.25.0"
@@ -4170,6 +4449,7 @@ __metadata:
     react-live: "npm:^4.1.8"
     sass: "npm:^1.86.3"
     slugify: "npm:^1.6.6"
+    typescript: "npm:^5.3.3"
     vite: "npm:^6.3.2"
   languageName: unknown
   linkType: soft
@@ -4321,6 +4601,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reusify@npm:^1.0.4":
+  version: 1.1.0
+  resolution: "reusify@npm:1.1.0"
+  checksum: 10c0/4eff0d4a5f9383566c7d7ec437b671cc51b25963bd61bf127c3f3d3f68e44a026d99b8d2f1ad344afff8d278a8fe70a8ea092650a716d22287e8bef7126bb2fa
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^4.34.9":
   version: 4.40.0
   resolution: "rollup@npm:4.40.0"
@@ -4396,6 +4683,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"run-parallel@npm:^1.1.9":
+  version: 1.2.0
+  resolution: "run-parallel@npm:1.2.0"
+  dependencies:
+    queue-microtask: "npm:^1.2.2"
+  checksum: 10c0/200b5ab25b5b8b7113f9901bfe3afc347e19bb7475b267d55ad0eb86a62a46d77510cb0f232507c9e5d497ebda569a08a9867d0d14f57a82ad5564d991588b39
+  languageName: node
+  linkType: hard
+
 "safe-array-concat@npm:^1.1.3":
   version: 1.1.3
   resolution: "safe-array-concat@npm:1.1.3"
@@ -4492,6 +4788,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.6.0":
+  version: 7.7.1
+  resolution: "semver@npm:7.7.1"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -4611,6 +4916,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "slash@npm:3.0.0"
+  checksum: 10c0/e18488c6a42bdfd4ac5be85b2ced3ccd0224773baae6ad42cfbb9ec74fc07f9fa8396bd35ee638084ead7a2a0818eb5e7151111544d4731ce843019dab4be47b
+  languageName: node
+  linkType: hard
+
 "slugify@npm:^1.6.6":
   version: 1.6.6
   resolution: "slugify@npm:1.6.6"
@@ -4924,6 +5236,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-api-utils@npm:^1.3.0":
+  version: 1.4.3
+  resolution: "ts-api-utils@npm:1.4.3"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: 10c0/e65dc6e7e8141140c23e1dc94984bf995d4f6801919c71d6dc27cf0cd51b100a91ffcfe5217626193e5bea9d46831e8586febdc7e172df3f1091a7384299e23a
+  languageName: node
+  linkType: hard
+
 "ts-interface-checker@npm:^0.1.9":
   version: 0.1.13
   resolution: "ts-interface-checker@npm:0.1.13"
@@ -5004,6 +5325,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.3.3":
+  version: 5.8.3
+  resolution: "typescript@npm:5.8.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/5f8bb01196e542e64d44db3d16ee0e4063ce4f3e3966df6005f2588e86d91c03e1fb131c2581baf0fb65ee79669eea6e161cd448178986587e9f6844446dbb48
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^5.3.3#optional!builtin<compat/typescript>":
+  version: 5.8.3
+  resolution: "typescript@patch:typescript@npm%3A5.8.3#optional!builtin<compat/typescript>::version=5.8.3&hash=5786d5"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/39117e346ff8ebd87ae1510b3a77d5d92dae5a89bde588c747d25da5c146603a99c8ee588c7ef80faaf123d89ed46f6dbd918d534d641083177d5fac38b8a1cb
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"