How to add new Shadcn UI components to your Next.js Supabase application

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.