Skip to Content
Folder StructureReact

React Folder Structure

The TailAdmin React Template is built on a modern stack using React 19, Vite 8, TypeScript, Tailwind CSS v4, React Router 8, and Base UI. It follows a modular, scalable architecture to keep source code, layout shells, reusable UI primitives, shared widgets, stylesheets, and localization dictionaries clean and maintainable.

Root Directory

The root directory organizes the source code and configuration.

File / FolderDescription
src/Contains all React components, layout shells, pages, routes, contexts, hooks, i18n, and styles.
public/Contains static files served directly (images/, favicon.png, maplibre/).
package.jsonManages scripts and dependencies.
vite.config.tsVite 8 configuration with React Compiler, Tailwind CSS v4 plugin, SVGR, and @/* path alias.
tsconfig.jsonTypeScript Config
eslint.config.jsESLint flat config with Oxlint.
.oxlintrc.jsonHigh-performance Rust-based Oxlint configuration for instant linting.
index.htmlApplication HTML entrypoint.
README.mdProject overview, prerequisites, and getting started instructions.
AGENTS.mdAuthoritative architecture, patterns, and guidelines for AI coding assistants.

Source Directory (src)

Inside src/, the codebase is organized into layout shells, UI primitives, shared widgets, categorized route pages, context providers, custom hooks, i18n localization, and styling.

src/
App.tsx# Central route registry (all routes & layout wrappers)
main.tsx# Entry point mounting context providers (Router, Theme, I18n …)
index.css# Core Tailwind config with custom styles
components/# Reusable UI components & widgets
layout/# Layout shells
app-layout/# Main app layout
layout-one/ … layout-six/# Alternative layout shells
shared/# Common components used across pages
ui/# Core UI primitives created using Base UI.
pages/
main/# Menu group pages
others/# Others group pages
support/# Support group pages
contexts/# Global React Context providers
hooks/# Custom React hooks
i18n/# Internationalization setup
messages/# Multi-language translation dictionaries
icons/# SVG icon components with barrel export
utils/# Common utility functions

Key Directories Explained

src/App.tsx

src/App.tsx is the single source of truth for all routes in the application.

  • Adding a Page: To add a new page:
  1. Create a feature folder under pages/{main,others,support}/,
  2. Colocate page-specific components, register the route in App.tsx,
  3. Add message files (messages/*.json),
  4. add navigation entries to components/layout/app-layout/sidebar/data.tsx

src/components/

The component library is split into layout shells, shared widgets, and atom-level UI primitives:

  • ui/: Flat, headless-style primitive components built on Base UI.
  • shared/: Cross-route widgets reused across multiple pages, including page-meta.tsx (page title & description via react-helmet-async), page-breadcrumb.tsx, component-card.tsx for showcase sections, and vector-map.tsx.
  • layout/: Application layout shells including the default app-layout (header, sidebar, content container, and Outlet) and six alternative layout configurations (layout-one through layout-six).

src/pages/

Routes are organized into three primary categories for structure and discoverability:

  • main/: Core dashboard features including 11 pre-built dashboard variations , AI Assistant, Calendar, Task management, Forms, Tables, and empty state pages.
  • support/: Real-time style chat messenger, full email client with inbox and detail views, and a complete support tickets help desk system.
  • others/: Supplementary feature pages including authentication forms (with AuthLayout), ApexCharts interactive charts, MapLibre GL and Leaflet interactive maps, and UI element showcases.

src/i18n/ & src/messages/

Built-in internationalization powered by i18next and react-i18next:

  • Translations: Organized in modular JSON dictionary files under src/messages/{en,ar,de,es}.json supporting ICU interpolation and plural syntax.
  • Supported Locales: English (en), Arabic (ar with automatic Right-to-Left RTL layout switching), German (de), and Spanish (es).
  • Translation Hooks: Access translated strings in components using const t = useTranslations("namespace") or getTranslations() outside components, with useLocale() and useChangeLocale() for locale management.

src/contexts/ & src/hooks/

  • contexts/: Clean global state management.
  • hooks/: Reusable custom hooks.
Last updated on
HTMLNext.js