# Product Note

* **Component**: \<NoteDialog/>
* **Path**: /components/shared/note-dialog.tsx
* **Import**:

```typescript
import { NoteDialog } from "@/components/shared/note-dialog";
```

<figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2Fs31DnTWkXuZMso1tHwAT%2FCapture%20d%E2%80%99%C3%A9cran%202024-06-18%20150406.png?alt=media&#x26;token=2a9d4b1f-3f1d-4367-90af-196fcbe8f0d6" alt=""><figcaption><p>Note Modal</p></figcaption></figure>

Note component is composed of:

* Recommended level (optional)
* 3 bullet point summaries (optional)
* Actual Markdown note
* Previous & Next recommended products (optional)

Notes are displayed on Product page and Collections:

<div><figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FG6JuhWknNYjwxaVk3XUf%2FCapture%20d%E2%80%99%C3%A9cran%202024-06-18%20151338.png?alt=media&#x26;token=e3f140c4-4e30-492d-be06-290747161576" alt="" width="563"><figcaption><p>Product Page Notes</p></figcaption></figure> <figure><img src="https://865796172-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FntKe5sSLfvbHfpqI4xbm%2Fuploads%2FmsCrZJlW19lOytiYxvko%2FCapture%20d%E2%80%99%C3%A9cran%202024-06-18%20151207.png?alt=media&#x26;token=fc8f10a9-0c5c-4787-9228-d08ad1babc7b" alt="" width="364"><figcaption><p>Collections Notes</p></figcaption></figure></div>