To install a Shadcn UI component, you can use the following command:
npx shadcn@latest add <component> -c ./packages/ui
For example, to install the Button
component, you can use the following command:
npx shadcn@latest add button -c ./packages/ui
We pass the --path
flag to specify the path where the component should be installed. You may need to adjust the path based on your project structure.
Update the imports
NB: you may need to update the imports to the cn
utility function to use the relative imports because it somehow breaks. Please do that.
Export the component
To achieve optimal tree-shaking, we export each component individually using the exports
field in the package.json
file. This allows you to import the component directly from the package.
Once the component has been created, you can export by adding a new export to the package.json
file.
We assume that the component is located at src/shadcn/avatar.tsx
. To export the component, you can append a new export field to the exports
map inside the package.json
file:
{
"exports": {
"./avatar": "./src/shadcn/avatar.tsx"
}
}
Now you can import it directly from the package:
import { Avatar } from '@kit/ui/avatar';
NB: this is an example, you need to adjust the component name based on the component you are exporting.