Difference between shared/ui, widgets ?

[toothlessdev]

I'm new to Feature Sliced Design and so confused between shared/ui and widgets

What is the difference between them ?

[KNU-K]

👍🏿

[illright]

Hi, thanks for the question! To give a quick answer — shared/ui contains highly reusable building blocks for UI, whereas widgets are entire meaningful blocks.

The shared/ui/ folder is where you would put components of a UI kit — like MUI or shadcn/ui. For example:

• shared/ui/Button.tsx
• shared/ui/accordion/AccordionItem.vue

Inside the widgets/ folder, you would put folders called slices. Slices divide your code into independent chunks of code that all relate to a single business goal (for example, a file browser in Google Drive is a single slice, then the file preview is another slice).

Slices on the Widgets layer then contain segments, for example, ui and api. Those allow you to separate concerns within this one business goal — separate presentational logic from API interactions. And then inside the ui segment you would find components:

• widgets/file-browser/ui/FileList.tsx

Often the UI code in Widgets imports code from shared/ui

[toothlessdev]

Thank you for your answer!
I just drew a diagram to decide where to place UI components.
Does this look like the right decision ?