Charts Page

In this lesson, we are only focusing on the folder structure, file naming conventions used in Charts page

Charts Page

This Charts Page source code is found at www/app/(app)/charts/page.tsx.

Components imported

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

import { THEMES } from "@/lib/themes"
import { ChartDisplay } from "@/components/chart-display"
import { ChartsNav } from "@/components/charts-nav"
import { ThemesSwitcher } from "@/components/themes-selector"
import { ThemesStyle } from "@/components/themes-styles"
import { Separator } from "@/registry/new-york/ui/separator"
import * as Charts from "@/app/(app)/charts/charts"

There are few observations that can be made here:

• @/components folder:

ChartDisplay, ChartsNav, ThemesSwitcher, ThemesStyle are imported from generic components folder that is at the root level.

You could place the components such as ChartDisplay, ChartsNav in a folder named components that could be created in app/(app)/charts for colocating purposes.

• charts components:

Conclusion:

You make the best judgement based on what works for you. Across the shadcn-ui/ui, components used in pages are located in components folder at the root level so they can be imported using @/components.

We picked the special use cases such as Charts Page, Mail Example page where you will find some components imported from with in the route folder.