TailAdmin Free Next.js Admin Dashboard

TailAdmin is a dashboard template built using modern web technologies to support server-side rendering (SSR), static site generation (SSG), and seamless API route integration.

Core Technologies:

• Framework: Next.js 16.x
• Library: React 19
• Language: TypeScript
• Styling: Tailwind CSS V4

TailAdmin is available in two versions depending on your project requirements:

Free Version

• 1 Unique Dashboard
• 30+ dashboard components
• 50+ UI elements
• Basic Figma design files
• Community support

Pro Version

• 7 Unique Dashboards (Analytics, Ecommerce, Marketing, CRM, SaaS, Stocks, Logistics)
• 500+ dashboard components and UI elements
• Complete Figma design file
• Email support

Follow these steps to set up the TailAdmin Next.js dashboard template on your local machine.

Prerequisites

• Node.js: version 18.x or later (Node.js 20.x or later is recommended).

Setup Steps

1. Clone the repository:

   git clone https://github.com/TailAdmin/free-nextjs-admin-dashboard.git

   Note: Windows users should place the repository near the root of the drive to avoid cloning issues.

2. Install dependencies:

   npm install
   # or
   yarn install

   Tip: If you encounter peer-dependency errors, use the --legacy-peer-deps flag.

3. Start the development server:

   npm run dev
   # or
   yarn dev

The sidebar's visibility, expansion, and navigation state are managed via a React Context provider. To use these features, you must wrap your application (or the relevant part of the layout) in the SidebarProvider. You can then access and manipulate the sidebar state in any child component using the useSidebar hook.

Important: Calling useSidebar in a component that is not a descendant of SidebarProvider will throw an error: "useSidebar must be used within a SidebarProvider".

The project uses Prettier for code formatting and includes the prettier-plugin-tailwindcss plugin. This plugin automatically sorts Tailwind CSS classes in the recommended order to maintain consistency across the codebase. To ensure your local environment matches the project's formatting, ensure this plugin is installed and recognized by your Prettier configuration.

module.exports = {
    plugins: ['prettier-plugin-tailwindcss'],
}

TailAdmin uses the new ESLint flat configuration format (eslint.config.mjs). The configuration integrates Next.js core web vitals rules and TypeScript support. It also defines specific global ignores to prevent ESLint from scanning build artifacts and Next.js environment files.

To maintain the project's linting standards, ensure your environment supports ESLint flat config and the following dependencies: eslint-config-next (for core-web-vitals and typescript configs) and eslint.

import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
import { defineConfig, globalIgnores } from "eslint/config";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  globalIgnores([
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

The Modal component is a client-side React component used to display content in an overlay. It handles backdrop clicking, the Escape key to close, and prevents body scrolling when open.

Key features:

• Backdrop: Clicking the backdrop closes the modal (unless isFullscreen is true).
• Keyboard Support: Pressing Escape triggers the onClose callback.
• Scroll Lock: Automatically sets document.body.style.overflow to hidden when open to prevent background scrolling.
• Fullscreen Mode: When isFullscreen is enabled, the modal occupies the full width and height of the viewport and removes the backdrop.

The application provides a centralized icon library exported from src/icons/index.tsx. These icons are imported as React components (SVG-based) and can be used directly in your components.

Commonly used icons include:

• Navigation/Direction: ArrowUpIcon, ArrowDownIcon, ArrowRightIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon.
• UI Feedback: CheckCircleIcon, AlertIcon, InfoIcon, ErrorIcon, CloseIcon, PlusIcon.
• Content/Media: VideoIcon, AudioIcon, FileIcon, FolderIcon, DocsIcon.
• User/System: UserIcon, UserCircleIcon, LockIcon, BellIcon, MailIcon, TimeIcon.
• Data/Layout: GridIcon, ListIcon, TableIcon, PieChartIcon, BoxIcon.

The dashboard uses a React Context to manage light and dark modes. To enable theme switching throughout your application, wrap your component tree with the ThemeProvider. You can then access the current theme and the toggleTheme function using the useTheme hook.

Key Behaviors:

• Persistence: The selected theme is automatically saved to localStorage under the key "theme".
• DOM Integration: When the theme is set to "dark", the "dark" class is added to document.documentElement. When set to "light", the class is removed.
• Default State: If no theme is found in localStorage, the application defaults to "light" mode.

The Modal component accepts the following props: