Home Page

Shadcn-ui/ui provides beautifully designed components that you can copy and paste into your apps.

In this lesson, we are only focusing on the folder structure, file naming conventions and how the page is built. To begin with, we picked https://ui.shadcn.com/, that is, the home page.

Home Page

This home page source code is found at app/(app)/page.tsx.

Components imported

The following components are imported in the home page, found at app/(app)/page.tsx

import { Announcement } from "@/components/announcement"
import { ExamplesNav } from "@/components/examples-nav"
import {
  PageActions,
  PageHeader,
  PageHeaderDescription,
  PageHeaderHeading,
} from "@/components/page-header"
import { Button } from "@/registry/new-york/ui/button"
import MailPage from "@/app/(app)/examples/mail/page"

There are few observations that can be made here:

• Component name follows PascalCase naming convention. Example: Announcement, ExamplesNav, PageActions, PageHeader, PageHeaderDescription etc.,

• Import alias used. You will find the below code snippet in tsconfig.json

"paths": {
      "@/*": ["./*"],
}

"@/" is the default import alias in Next.js.

• File naming convention. File names such as examples-nav, page-header seem to be following kebab-case convention.

• Folder structure Components used in this home page are found to be imported from

1. components folder

Components folder does not have any nested folders. All the components that are used across the shadcn-ui/ui are located in this folder.

These components are different from what you see on https://ui.shadcn.com/docs/components. Different how? https://ui.shadcn.com/docs/components provides the components that can be copied and pasted and these reside in registry. However, components provides building blocks that are built using components from registry and are used in pages.

2. registry/new-york/ui folder

registry/new-york/ui contains the components the components that you see at https://ui.shadcn.com/docs/components.

This ui folder is what you get when you initialise shadcn-ui/ui via the CLI. There's no need to create a folder named registry and put your ui components in there because shadcn-ui/ui already does this for you via the CLI.

3. @/app/(app)/examples/mail folder

@/app/(app)/examples/mail this is an interesting use case because this imports the whole MailPage.

What does this tell us? it means, you can use a page as a component, that is MailPage in this case, by importing in another page.

Conclusion:

You will find this common pattern across the entire shadcn-ui/ui pages using the app router. Components used are either imported from components folder or imported registry/new-york/ui folder which is the exact folder that shadcn-ui/ui creates for you in your project when you initialise it via CLI. There is one special use case where a MailPage is imported in Home Page to show MailPage on the landing page.