Manual installation dependencies
To manually install shadcn/ui, install the following npm packages: shadcn, class-variance-authority, cn, lucide-react, and tw-animate-css.
shadcn/ui · Components · all subjects
installation procedures
7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Tailwind CSS required for shadcn/ui
Components in shadcn/ui are styled using Tailwind CSS. You must install Tailwind CSS in your project before adding shadcn/ui components.
Import alias setup Option A with tsconfig.json
Configure import aliases in tsconfig.json by setting baseUrl to '.' and adding a paths object with '@/*': ['./*'] to allow importing from project root.
Import alias setup Option B with package.json imports
Configure import aliases using package.json imports field with entries like '#components/*': './src/components/*.tsx', '#lib/*': './src/lib/*.ts', and '#hooks/*': './src/hooks/*.ts'. In tsconfig.json, set moduleResolution to 'bundler' and resolvePackageJsonImports to true.
cn helper export from lib/utils.ts
Create a lib/utils.ts file that re-exports cn directly from the 'cn' package: export { cn } from 'cn'. This provides a single place for your code to import helper utilities.
components.json configuration file structure
Create a components.json file at the project root with schema url 'https://ui.shadcn.com/schema.json', style 'base-nova', rsc false, tsx true, tailwind config with css 'src/styles/globals.css', baseColor 'neutral', cssVariables true, prefix empty string, aliases mapping for components '@/components', utils '@/lib/utils', ui '@/components/ui', lib '@/lib', hooks '@/hooks', and iconLibrary 'lucide'.
components.json configuration with package.json imports
When using package.json#imports for aliases, configure components.json aliases with '#components' for components, '#lib/utils' for utils, '#components/ui' for ui, '#lib' for lib, and '#hooks' for hooks.