DocsFolder StructureReact

React File Structure

The TailAdmin React Template follows a clean, component-based architecture designed for Vite. It separates UI components, pages, and logic hooks to ensure a maintainable codebase.

Root Directory

The root directory organizes the source code and configuration.

File / FolderDescription
src/Source Code: Core application logic and components.
public/Public Assets: Static files served directly (favicon, robots.txt).
vite.config.tsVite Config: Build tool configuration.
package.jsonProject Manifest: Dependencies and scripts.
tailwind.config.jsTailwind Config: Design system tokens and plugins.
tsconfig.jsonTypeScript Config: Configuration for TypeScript.

Source Directory (src)

Inside src/, the structure separates concerns between view logic and business logic.

src/
components/# Reusable UI Components
common/# Shared layout-related items
ui/# Atom-level components
contexts/# Global State Providers
SidebarContext.tsx
ThemeContext.tsx
hooks/# Custom Hooks
images/# Local image assets
pages/# Page-level Components
Dashboard/# Dashboard submodule pages
Analytics.tsx
Ecommerce.tsx
Settings.tsx
App.tsx# Root Component
main.tsx# Entry Point
index.css# Global Styles

Key Directories Explained

src/components/

Use this folder for all your visual elements.

  • ui/: Generic, headless-style components.
  • common/: App-specific shared components.

src/pages/

Each file or folder here corresponds to a route in your application. We group related pages (like Dashboard views) into subfolders for clarity.

src/contexts/

Contains React Context providers to avoid prop drilling.

  • SidebarContext: Manages the sidebar toggle state.
  • ThemeContext: Handles Dark/Light mode preferences.
HTMLNext.js