Using Catalyst

Using https://tailwindcss.com/plus/ui-kit (Typescript version)

Documentation https://catalyst.tailwindui.com/docs

pnpm --filter app-name add @astrojs/react

pnpm --filter app-name install @headlessui/react framer-motion clsx

pnpm --filter app-name add react react-dom

add to the UI components as Link.tsx

import * as Headless from '@headlessui/react'
import React, { forwardRef } from 'react'

export const Link = forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<'a'>
>(function Link(props, ref) {
  return (
    <Headless.DataInteractive>
      <a {...props} ref={ref} />
    </Headless.DataInteractive>
  )
})

astro.config.js

+ import react from '@astrojs/react';

export default defineConfig({

+ integrations: [react()],
vite: {
  plugins: [tailwindcss()],

},
});