TailAdmin React Documentation

TailAdmin is a dashboard template built using:

• React 19
• TypeScript
• Tailwind CSS v4

Included Components

The template provides a variety of pre-designed UI elements, including:

• Navigation: Sophisticated and accessible sidebar.
• Data Visualization: Tables, Line charts, and Bar charts.
• Forms & Inputs: Authentication forms, input elements, and date pickers.
• UI Elements: Alerts, Dropdowns, Modals, Buttons, FAQ & Accordion, Testimonials, and Carousels.
• Pages: Prebuilt profile management and 404 pages.
• Features: Dark Mode support.

Follow these steps to set up the TailAdmin React 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-react-tailwind-admin-dashboard.git

   Note for Windows users: If you encounter issues during cloning, place the repository near the root of your drive.

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

The Table component library provides a set of modular components to build semantic HTML tables using Tailwind CSS. You compose a table by nesting TableHeader, TableBody, TableRow, and TableCell components inside a Table container.

Component API

• Table: The root container. Accepts children (the table structure) and an optional className.
• TableHeader: Renders a <thead> element. Accepts children and an optional className.
• TableBody: Renders a <tbody> element. Accepts children and an optional className.
• TableRow: Renders a <tr> element. Accepts children and an optional className.
• TableCell: Renders either a <th> or <td> element.
  • isHeader: (boolean) If true, renders as <th>. Defaults to false (<td>).
  • children: The content of the cell.
  • className: Optional styling.

TailAdmin offers a Free version and a Pro version with different feature sets.

Free Version

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

Pro Version

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

The ThemeToggleButton is a pre-styled React component used to switch the application between light and dark modes. It relies on the useTheme hook from the ThemeContext to access the toggleTheme function. When clicked, it triggers the theme change and automatically updates the UI based on the current theme state.

To use it, ensure your component tree is wrapped in the appropriate ThemeProvider (provided by the project's context system) and then import and render the component.

Note: The component uses Tailwind CSS classes for styling and handles icon visibility (sun/moon) based on the dark class presence in the DOM.

The useTheme hook allows you to access and control the application's current theme (light or dark). It provides the current theme string and a toggleTheme function to switch between modes.

Note: This hook must be used within a component that is a child of the ThemeProvider.

The project supports importing SVG files directly as React components by appending the ?react query parameter to the import path. This allows you to use the SVG as a standard React functional component and pass props like className, style, or onClick directly to it.

When using this pattern, the module provides two exports:

1. A default export which is the string URL/path to the SVG file.
2. A named export ReactComponent which is the React component itself.

The Modal component is a reusable UI element used to display content in an overlay. It handles backdrop clicking, the 'Escape' key to close, and prevents body scrolling when active.

Key features:

• Backdrop Close: Clicking the backdrop closes the modal (unless isFullscreen is true).
• Keyboard Support: Pressing the Escape key 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 expands to fill the entire viewport and removes the backdrop.

The Dropdown component accepts the following props:

The TableCell component is used to render individual cells within a TableRow. It dynamically switches between <th> and <td> tags based on the isHeader prop.