Folder Structure

Understand how the shadcn admin template separates routes, views, shared components, configuration, demo data, and customization points.

Heads up:

Use this structure as the base reference for the Admin Dashboard Template. If you remove a feature, also remove its related route, view, config entry, mock data, and store code.

Overview#

Before checking folder structure it is better you know some stuff related to folder structure.

src/app folder contains the Next.js App Router routes, layouts, route handlers, and server actions.
src/app/(pages) folder contains dashboard routes which render inside the Admin shell with sidebar, header and footer.
src/app/(blank) folder contains auth pages and standalone screens where Admin shell is not required.
src/views folder contains page-level UI. Basically this is the place where you can modify dashboard screens without keeping all UI inside route files.
src/fake-db folder just contains dummy data which we get in response of API call. This enables us to provide an API-ready template.
src/components folder contains shared components, layouts, providers, and reusable UI which you can modify however you like.
src/configs folder contains template configuration like navigation and feature settings. Update these files first before editing layout components directly.

Admin Dashboard Template structure#

The complete folder structure is shown in a single tree so you can see how root files, route groups, source folders, and customization areas relate to each other.

Main folders and files#

These root-level folders and files are the first places to check when installing, configuring, or deploying the template.

Folder/File	Description
`public`	Stores static files that Next.js serves directly from the site root, such as images, icons, logos, and favicons.
`src`	Contains the actual application source: routes, views, components, configuration, mock data, hooks, stores, and utilities.
`.env.example`	Lists the environment variables expected by the template. Copy the required keys into your local .env file during setup.
`components.json`	Defines shadcn/ui configuration, aliases, registry settings, and paths used when adding or updating UI components.
`next.config.ts`	Controls Next.js behavior such as image settings, build options, redirects, or deployment-specific config.
`eslint.config.mjs`	Defines ESLint rules and project linting behavior.
`package.json`	Contains scripts, dependencies, dev dependencies, and package manager metadata for the Admin Dashboard Template.
`postcss.config.mjs`	Configures PostCSS for Tailwind CSS v4 processing.
`tsconfig.json`	Defines TypeScript compiler options and path aliases used throughout the project.
`vercel.json`	Contains deployment configuration for Vercel when the template is hosted there.

Understanding the app folder#

The src/app folder controls routing, layouts, route groups, global styles, server actions, and route handlers. Keep route files focused on routing and move larger UI into views.

Folder/File	Description
`src/app/layout.tsx`	The root layout wraps every route with fonts, metadata, theme handling, settings, and application providers.
`src/app/globals.css`	The global stylesheet for Tailwind CSS, theme variables, sidebar tokens, chart colors, radius, and dark mode values.
`src/app/(pages)`	The main admin route group. It contains dashboard, apps, datatable, forms, and content pages rendered inside the dashboard shell.
`src/app/(blank)`	A minimal route group for screens that should not show the admin shell, such as auth, onboarding, and misc error pages.
`src/app/api`	Route handlers for demo APIs or integration points that run on the server.
`src/app/server`	Server Actions and server-only helpers used by demo features. Replace or extend this layer when connecting real services.
`src/app/not-found.tsx`	The custom 404 screen rendered when a route cannot be matched.

Understanding the source folders#

The rest of src is organized by responsibility. This separation helps you customize one layer without accidentally changing unrelated dashboard screens.

Folder/File	Description
`src/assets`	Holds local static helpers such as search data, constants, option lists, SVG assets, and other non-component resources.
`src/components`	Stores reusable UI shared across many screens, including shadcn/ui primitives, layout parts, shared dropdowns, dialogs, and app providers.
`src/configs`	Central place for template configuration. Navigation, menus, labels, and feature constants should be updated here first.
`src/contexts`	React context modules for app-wide state that needs to be read by many components without prop drilling.
`src/fake-db`	Mock data used by apps, pricing, FAQ, profile, settings, and other demos before you connect your backend.
`src/hooks`	Reusable hooks for shared client-side behavior. Use this folder for logic that is needed by more than one view or component.
`src/lib`	General-purpose utilities and shared helpers, including class name merging and other foundation-level functions.
`src/store`	Zustand stores for interactive app features such as calendar, chat, contact, kanban, mail, roles, and users.
`src/types`	Shared TypeScript types and interfaces used across routes, views, components, stores, and mock data.
`src/utils`	Feature-specific utility functions that support dashboards, apps, settings, tables, and other template flows.
`src/views`	Page-level UI modules for apps, dashboards, datatables, forms, auth, onboarding, profile, settings, and misc pages.

Use this table as a practical guide when customizing the Admin Dashboard Template. Start from the narrowest folder that owns the change, then update related route, config, or data files only when needed.

Task	Update	Notes
Add a new admin page	`src/app/(pages), src/views, src/configs/navConfig.tsx`	Create the route, place the page UI in a matching view folder, then add the menu item so it appears in the sidebar.
Change sidebar navigation	`src/configs/navConfig.tsx`	Update menu groups, labels, icons, paths, nested items, and external links from the navigation config before editing layout code.
Update theme and branding	`src/app/globals.css, src/configs/themeConfig.ts, components.json, public`	Change design tokens, radius, chart colors, sidebar colors, logos, favicons, and shadcn/ui aliases from these files.
Replace demo data	`src/fake-db, src/app/server, src/app/api, src/store`	Swap mock records and demo actions with your API, database, auth provider, or production state management.
Edit shared UI	`src/components`	Use shared components for repeated UI such as layout, buttons, dialogs, dashboard cards, providers, and reusable sections.
Edit one page only	`src/views`	Change the related view when the update belongs to one screen and does not need to be reused elsewhere.

PreviousInstallation

NextDependencies