Introduction

In this guide, you will learn how components are organized in shadcn-ui/ui

By components, here we mean the building blocks of the user interface or more precisely, the building blocks used in a page.

Our focus is primarily on the folder structure and file naming conventions used. In order to establish a common pattern and to understand components structure better, we will study few pages/routes in the Shadcn-ui/ui.

Our approach is to pick a route, locate the route in the source code and from there on, we will look at

1. Where the imported components are located in a project
2. Folder structure and naming conventions used
3. How the "page" is built using these imported components

There will be screenshots and links pointing to folders and components that belong to a project.

Use this free guide to learn how components are organized in Shadcn-ui/ui.