ui

ui copied to clipboard

I have tsconfig using references like:

{
  "files": [],
  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }],
}

However shadcn cli doesn't check reference path to look for component and utils alias. I think adding tsconfig path option to customize the tsconfig file path in components.json will solve the problem.

I'm having the same issue, is there any way to resolve this?

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

It's maybe a good idea to prepare a dedicated script that utilizes the path option of the component addition command.

Add Script for Adding Components

Since the shadcn CLI does not support references in tsconfig.json, a dedicated command is created.

packages.json

"scripts": {
    "---- TOOL SECTION ----": "---- ---- ---- ---- ----",
    "add-component": "sh -c 'npx shadcn-ui@latest add \"$1\" -p src/renderer/src/components/shadcn/ui' --",
    "add-component-ps": "powershell -Command \"npx shadcn-ui@latest add $args[0] -p src/renderer/src/components/shadcn/ui\""  
}

add-component is for shell, add-component-ps is for PowerShell

Install Button

npm run add-component button

Usage Example

e.g.

import { Button } from '@renderer/components/ui/button';
import '@renderer/styles/globals.css';

function Home() {
  return (
    <>
      <Button variant="default" className="m-4">
        Button
      </Button>
    </>
  );
}