Import a Custom Lit Package

Question

This is my first time creating and publishing a Lit custom element on NPM. The element also contains a React Adapter. In a react project, the component cannot be auto imported.

So I had to import it like so:

import { ServiceCardComponent } from "../../../node_modules/lit-clientappcard/src/service-card";

And here is the React Adapter

export const ServiceCardComponent = createComponent({
    tagName: 'service-card',
    elementClass: ServiceCard,
    react: React
})

this is my package.json for the project for creating and publishing the component

  "name": "lit-clientappcard",
  "private": false,
  "version": "0.1.3",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@lit-labs/react": "^2.1.0",
    "@types/react": "^18.2.24",
    "lit": "^2.7.6",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

this is my package.json for the project using the component

{
  "name": "my_website",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.11",
    "@mui/material": "^5.14.11",
    "lit-clientappcard": "^0.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "swiper": "^10.3.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.1.0",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

How can I make it auto import. And what's recommended setting in package.json for such projects.