Monorepo with shadcn paths from Typescript is not working

Question

I am attempting to learn monorepo architecture and I am currently working on with Turborepo and monrepo using both pages router app and app router app .

The issue I am seeing is that ts module aliasing isn't configured properly. I currently have a single ui package under the ui I have two folder shadcn and shared in shared folder I have the custom componetnt to use globally in all project and in shacn folder under the ui have all to shadcn component i need. so i am importing the shadcn component to a custom componet inside shard folder with another folder called card inside card i have the component called testCard.so when i am using the default path which is import { Badge } from '../../shadcn/ui/badge';it is working fine the problem is when i am using alias to shorten the path i am getting the error of web:dev: Module not found: Can't resolve '@/components/shadcn/ui/input' and (notice, VS code not complaining, it thinks it can resolve the module):the problem is showing during the compile time.

so here is my tsconfig for ui . i have followed a instuction previously shared in this platform

// ui-> tsconfig.json
    {
    "extends": "tsconfig/react-library.json",
    "include": ["."],
    "exclude": ["dist", "build", "node_modules"],
    "compilerOptions": {
    "baseUrl": ".",
    "paths": {
     "@/components/*": ["components/*"]
    }
    } 
    }

     // root -> tsconfig.json
    {
  
    "compilerOptions": {
    
    "paths": {
     "@*": ["./packages/ui/*"]
     }
     },
     "extends": "tsconfig/base.json"
  
     }

Plese tell me where i am making the mistake. P.s i am using next js for turbo repo .