Guide
Charts Page

Charts Page

Components Structure In Charts Page.

[C: shadcn-ui/ui] [L: 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.

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.

Mail Example PageIntroduction