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

Makerkit implements most of the Shadcn UI components - however, if you need to add a new component, you can do so by following the steps below.

1. Use Manual Installation steps from the Shadcn UI component documentation.
2. Add the component to the packages/ui/src/shadcn directory.
3. Replace the imports with the relative imports.
4. Export the component by adding a new export to the package.json file.
5. Import the component directly from the package.

Exporting 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.