I'm wondering what is the difference between ui and common inside components folder in vercel/commerce next.js example source code?

Question

I try to follow vercel next.js example folder structure, but don't know what is the difference between ui and common inside components folder in vercel/commerce next.js example source code.

It seems that UI is an atomic styled component that is a reusable building block, and Common is a component that is build using what have been defined in UI folder but used everywhere too.

This is the source code:
https://github.com/vercel/commerce/tree/main/site/components/common

Answer 1

That is a great question, I am also developing on top of Next.js Commerce, and I find that they don't provide any specific documentation for the custom hooks. schema (API) and the overall structure of the project.

It seems that UI is an atomic styled component that is a reusable building block, and Common is a component that is build using what have been defined in UI folder but used everywhere too.

You are right!

Essentially in the components/ui folder, you will find all the components that comprise of the UI design of the application & are used repeatedly over the website. For example, button, link, grid, dropdown, input...

In the components/common folder though, you will find components that are also used repeatedly throughout the application, and are not single elements like the UI ones (button, link, input...). Instead, they are a combination of UI components with additional functionality, that are also meant to be used in various places through the code (eg avatar, footer...)

Hope my answer was clear!