tsx

Adding Web Component Types to React

React doesn't recognize custom element tag names in JSX, so TypeScript complains. You can fix this by extending React's IntrinsicElements with your component's props alongside DetailedHTMLProps to keep standard React props like children, className, ref, and key working.

import { useRef, type DetailedHTMLProps, type HTMLAttributes } from "react"

declare module "react/jsx-runtime" {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      "my-button": DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
        /** The variant of the button, either "primary" or "secondary". */
        variant: "primary" | "secondary"
        /** Whether the button is disabled. @default false */
        disabled?: boolean
      }
    }
  }
}

export function Page() {
  const btnRef = useRef<HTMLButtonElement>(null)

  return (
    <my-button variant="primary" key="some-key" ref={btnRef}>
      Submit
    </my-button>
  )
}

reacttypescriptwebcomponents

lubosmatoFeb 11, 2026