Using Tailwind's Catalyst UI with Tanstack Router

import { DataInteractive as HeadlessDataInteractive } from '@headlessui/react'
import React from 'react'
import { Link as TanstackLink, AnyRoute, RegisteredRouter, RoutePaths, LinkProps } from '@tanstack/react-router'

export const Link = React.forwardRef(function Link<
  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = '',
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = ''
>(
  props: { href: string | LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>["to"] } & Omit<LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo>, "to">,
  ref: React.ForwardedRef<HTMLAnchorElement>
) {
  return (
    <HeadlessDataInteractive>
      <TanstackLink {...props} to={props.href} ref={ref} />
    </HeadlessDataInteractive>
  )
})