CODEWITHSUNDEEP
reactjsshadcnui
Pawan
Pawan

Reputation: 857

What needs to be added to path @/lib/utils when trying to use shadcn/ui components?

I am trying to use the shadcn dropdown component in my react application. I am not using Tailwind. I followed their docs and chose the path to add the code manually, but now I get an error:

Module not found: Can't resolve '@/lib/utils'
  3 | import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
  4 |
> 5 | import { cn } from "@/lib/utils";
  6 |
  7 | const DropdownMenu = DropdownMenuPrimitive.Root;

Please guide me on what needs to be added to folder @/lib/utils.

Upvotes: 11

Views: 14893

Answers (3)

PikaPika
PikaPika

Reputation: 1

1A. Add a "lib" folder to your project folder

1B. Add a Utils.ts file to your "lib" folder

  1. Install the dependency: npm install @radix-ui/react-dropdown-menu

  2. Follow steps 2 from https://ui.shadcn.com/docs/components/dropdown-menu

  3. import { cn } from "@/lib/utils"; // it should now work!

Upvotes: 0

ybmeng
ybmeng

Reputation: 121

cn() can be found in the shadcn git repo:

import * as React from "react"
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
}

source: https://github.com/shadcn-ui/ui/blob/bebc2843f0e0daa4e508def74fb3ba8a08e98f6f/apps/www/lib/utils.ts#L5C1-L6C1

Upvotes: 12

Ahmed Abdelbaset
Ahmed Abdelbaset

Reputation: 4946

@/ is an alias path that must be defined in your tsconfig.json or its equivalent.

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
    }
  },
}

The path specified between [] should be relative to your lib folder. If your lib is within the src directory, it should be ["./src/*"]. If your lib is at the root, it should be ["./*"].

Upvotes: 1

Related Questions