diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ac3a4984a..dbcbff3c5 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 /**
  * Render the button elements in the calendar.
@@ -6,7 +6,7 @@ import React from "react";
  * @private
  * @deprecated Use `PreviousMonthButton` or `@link NextMonthButton` instead.
  */
-export function Button(props: JSX.IntrinsicElements["button"]) {
+export function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
   return <button {...props} />;
 }
 
diff --git a/src/components/CaptionLabel.tsx b/src/components/CaptionLabel.tsx
index 37631aaab..6cdd5b9ad 100644
--- a/src/components/CaptionLabel.tsx
+++ b/src/components/CaptionLabel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the label in the month caption.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function CaptionLabel(props: JSX.IntrinsicElements["span"]) {
+export function CaptionLabel(props: HTMLAttributes<HTMLSpanElement>) {
   return <span {...props} />;
 }
 
diff --git a/src/components/Day.tsx b/src/components/Day.tsx
index d4a2f4a12..7fba581af 100644
--- a/src/components/Day.tsx
+++ b/src/components/Day.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarDay } from "../classes/index.js";
 import type { Modifiers } from "../types/index.js";
@@ -19,7 +19,7 @@ export function Day(
     day: CalendarDay;
     /** The modifiers to apply to the day. */
     modifiers: Modifiers;
-  } & JSX.IntrinsicElements["td"]
+  } & HTMLAttributes<HTMLDivElement>
 ) {
   const { day, modifiers, ...tdProps } = props;
   return <td {...tdProps} />;
diff --git a/src/components/DayButton.tsx b/src/components/DayButton.tsx
index a5ee10371..032330683 100644
--- a/src/components/DayButton.tsx
+++ b/src/components/DayButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 import type { CalendarDay } from "../classes/index.js";
 import type { Modifiers } from "../types/index.js";
@@ -15,7 +15,7 @@ export function DayButton(
     day: CalendarDay;
     /** The modifiers for the day. */
     modifiers: Modifiers;
-  } & JSX.IntrinsicElements["button"]
+  } & ButtonHTMLAttributes<HTMLButtonElement>
 ) {
   const { day, modifiers, ...buttonProps } = props;
 
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index fc732192f..f976a402d 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type SelectHTMLAttributes } from "react";
 
 import { UI } from "../UI.js";
 import type { ClassNames, CustomComponents } from "../types/index.js";
@@ -35,7 +35,7 @@ export function Dropdown(
      */
     classNames: ClassNames;
     options?: DropdownOption[] | undefined;
-  } & Omit<JSX.IntrinsicElements["select"], "children">
+  } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "children">
 ) {
   const { options, className, components, classNames, ...selectProps } = props;
 
diff --git a/src/components/DropdownNav.tsx b/src/components/DropdownNav.tsx
index 7946e3cdc..124fc5ee5 100644
--- a/src/components/DropdownNav.tsx
+++ b/src/components/DropdownNav.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the the navigation dropdowns.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function DropdownNav(props: JSX.IntrinsicElements["div"]) {
+export function DropdownNav(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 2bfd1678e..ac47e13f1 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Component wrapping the footer.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Footer(props: JSX.IntrinsicElements["div"]) {
+export function Footer(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 
diff --git a/src/components/Month.tsx b/src/components/Month.tsx
index 016be9819..ce2e292a5 100644
--- a/src/components/Month.tsx
+++ b/src/components/Month.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarMonth } from "../classes/CalendarMonth.js";
 
@@ -15,7 +15,7 @@ export function Month(
     calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
     displayIndex: number;
-  } & JSX.IntrinsicElements["div"]
+  } & HTMLAttributes<HTMLDivElement>
 ) {
   const { calendarMonth, displayIndex, ...divProps } = props;
   return <div {...divProps}>{props.children}</div>;
diff --git a/src/components/MonthCaption.tsx b/src/components/MonthCaption.tsx
index 05e41993d..84a54bdfb 100644
--- a/src/components/MonthCaption.tsx
+++ b/src/components/MonthCaption.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarMonth } from "../classes/index.js";
 
@@ -14,7 +14,7 @@ export function MonthCaption(
     calendarMonth: CalendarMonth;
     /** The index where this month is displayed. */
     displayIndex: number;
-  } & JSX.IntrinsicElements["div"]
+  } & HTMLAttributes<HTMLDivElement>
 ) {
   const { calendarMonth, displayIndex, ...divProps } = props;
   return <div {...divProps} />;
diff --git a/src/components/MonthGrid.tsx b/src/components/MonthGrid.tsx
index 59d7dbded..964033d0f 100644
--- a/src/components/MonthGrid.tsx
+++ b/src/components/MonthGrid.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type TableHTMLAttributes } from "react";
 
 /**
  * Render the grid of days in a month.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function MonthGrid(props: JSX.IntrinsicElements["table"]) {
+export function MonthGrid(props: TableHTMLAttributes<HTMLTableElement>) {
   return <table {...props} />;
 }
 
diff --git a/src/components/Months.tsx b/src/components/Months.tsx
index 97079c236..37af5e7a1 100644
--- a/src/components/Months.tsx
+++ b/src/components/Months.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Component wrapping the month grids.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Months(props: JSX.IntrinsicElements["div"]) {
+export function Months(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 36221ef79..b9dc2c4d6 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from "react";
+import React, { type MouseEventHandler, type HTMLAttributes } from "react";
 
 import { UI } from "../UI.js";
 import { useDayPicker } from "../useDayPicker.js";
@@ -15,7 +15,7 @@ export function Nav(
     onNextClick?: MouseEventHandler<HTMLButtonElement>;
     previousMonth?: Date | undefined;
     nextMonth?: Date | undefined;
-  } & JSX.IntrinsicElements["nav"]
+  } & HTMLAttributes<HTMLElement>
 ) {
   const {
     onPreviousClick,
diff --git a/src/components/NextMonthButton.tsx b/src/components/NextMonthButton.tsx
index 5a7ee282e..101739d4b 100644
--- a/src/components/NextMonthButton.tsx
+++ b/src/components/NextMonthButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 import { useDayPicker } from "../useDayPicker.js";
 
@@ -8,7 +8,9 @@ import { useDayPicker } from "../useDayPicker.js";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function NextMonthButton(props: JSX.IntrinsicElements["button"]) {
+export function NextMonthButton(
+  props: ButtonHTMLAttributes<HTMLButtonElement>
+) {
   const { components } = useDayPicker();
   return <components.Button {...props} />;
 }
diff --git a/src/components/Option.tsx b/src/components/Option.tsx
index 2ecda140f..e2a415bc5 100644
--- a/src/components/Option.tsx
+++ b/src/components/Option.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type OptionHTMLAttributes } from "react";
 
 /**
  * Render the `option` element.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Option(props: JSX.IntrinsicElements["option"]) {
+export function Option(props: OptionHTMLAttributes<HTMLOptionElement>) {
   return <option {...props} />;
 }
 
diff --git a/src/components/PreviousMonthButton.tsx b/src/components/PreviousMonthButton.tsx
index d8bbfa9cb..2cda91f40 100644
--- a/src/components/PreviousMonthButton.tsx
+++ b/src/components/PreviousMonthButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ButtonHTMLAttributes } from "react";
 
 import { useDayPicker } from "../useDayPicker.js";
 
@@ -8,7 +8,9 @@ import { useDayPicker } from "../useDayPicker.js";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function PreviousMonthButton(props: JSX.IntrinsicElements["button"]) {
+export function PreviousMonthButton(
+  props: ButtonHTMLAttributes<HTMLButtonElement>
+) {
   const { components } = useDayPicker();
   return <components.Button {...props} />;
 }
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index c91379a24..f49a7da4b 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the root element.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Root(props: JSX.IntrinsicElements["div"]) {
+export function Root(props: HTMLAttributes<HTMLDivElement>) {
   return <div {...props} />;
 }
 
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 3551799d2..9655a04c0 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type SelectHTMLAttributes } from "react";
 
 /**
  * Render the `select` element.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Select(props: JSX.IntrinsicElements["select"]) {
+export function Select(props: SelectHTMLAttributes<HTMLSelectElement>) {
   return <select {...props} />;
 }
 
diff --git a/src/components/Week.tsx b/src/components/Week.tsx
index 16cbccdcc..321c993be 100644
--- a/src/components/Week.tsx
+++ b/src/components/Week.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 import type { CalendarWeek } from "../classes/index.js";
 
@@ -11,7 +11,7 @@ import type { CalendarWeek } from "../classes/index.js";
 export function Week(
   props: {
     week: CalendarWeek;
-  } & JSX.IntrinsicElements["tr"]
+  } & HTMLAttributes<HTMLTableRowElement>
 ) {
   const { week, ...trProps } = props;
   return <tr {...trProps} />;
diff --git a/src/components/WeekNumber.tsx b/src/components/WeekNumber.tsx
index b211f6f33..d8f971de6 100644
--- a/src/components/WeekNumber.tsx
+++ b/src/components/WeekNumber.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ThHTMLAttributes } from "react";
 
 import type { CalendarWeek } from "../classes/index.js";
 
@@ -12,7 +12,7 @@ export function WeekNumber(
   props: {
     /** The week to render. */
     week: CalendarWeek;
-  } & JSX.IntrinsicElements["th"]
+  } & ThHTMLAttributes<HTMLTableCellElement>
 ) {
   const { week, ...thProps } = props;
   return <th {...thProps} />;
diff --git a/src/components/WeekNumberHeader.tsx b/src/components/WeekNumberHeader.tsx
index f64b1931f..085c0bc85 100644
--- a/src/components/WeekNumberHeader.tsx
+++ b/src/components/WeekNumberHeader.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ThHTMLAttributes } from "react";
 
 /**
  * Render the column header for the week numbers.
@@ -6,7 +6,9 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function WeekNumberHeader(props: JSX.IntrinsicElements["th"]) {
+export function WeekNumberHeader(
+  props: ThHTMLAttributes<HTMLTableCellElement>
+) {
   return <th {...props} />;
 }
 
diff --git a/src/components/Weekday.tsx b/src/components/Weekday.tsx
index 4589d7f7f..7fd24a53d 100644
--- a/src/components/Weekday.tsx
+++ b/src/components/Weekday.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ThHTMLAttributes } from "react";
 
 /**
  * Render the column header with the weekday name (e.g. "Mo", "Tu", etc.).
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Weekday(props: JSX.IntrinsicElements["th"]) {
+export function Weekday(props: ThHTMLAttributes<HTMLTableCellElement>) {
   return <th {...props} />;
 }
 
diff --git a/src/components/Weekdays.tsx b/src/components/Weekdays.tsx
index b1decad36..3ee4d3df7 100644
--- a/src/components/Weekdays.tsx
+++ b/src/components/Weekdays.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the row with the weekday names.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Weekdays(props: JSX.IntrinsicElements["tr"]) {
+export function Weekdays(props: HTMLAttributes<HTMLTableRowElement>) {
   return (
     <thead aria-hidden>
       <tr {...props} />
diff --git a/src/components/Weeks.tsx b/src/components/Weeks.tsx
index 88064329e..85ad50396 100644
--- a/src/components/Weeks.tsx
+++ b/src/components/Weeks.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type HTMLAttributes } from "react";
 
 /**
  * Render the weeks in the month grid.
@@ -6,7 +6,7 @@ import React from "react";
  * @group Components
  * @see https://daypicker.dev/guides/custom-components
  */
-export function Weeks(props: JSX.IntrinsicElements["tbody"]) {
+export function Weeks(props: HTMLAttributes<HTMLTableSectionElement>) {
   return <tbody {...props} />;
 }
 
diff --git a/website/src/components/BrowserWindow.tsx b/website/src/components/BrowserWindow.tsx
index 5ca9bbb3c..bcf1549a2 100644
--- a/website/src/components/BrowserWindow.tsx
+++ b/website/src/components/BrowserWindow.tsx
@@ -24,7 +24,7 @@ export function BrowserWindow({
   style,
   bodyStyle,
   shadow = true
-}: Props): JSX.Element {
+}: Props) {
   return (
     <div className={styles.browserWindow} style={{ ...style, minHeight }}>
       <div className={styles.browserWindowHeader}>