TailAdmin Free Tailwind Dashboard Template

TailAdmin is a free Tailwind CSS admin template designed for building data-rich backends and web applications. The project is built using the following core technologies:

• HTML: For structure.
• Alpine.js: For client-side interactivity.
• Tailwind CSS: For utility-first styling (upgraded to v4 in recent versions).
• Webpack: Used for bundling assets.

TailAdmin offers a Free version for community use and a Pro version for advanced 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, Stocks, etc.)
• 500+ dashboard components and UI elements
• Complete Figma design system file
• Email support

To set up the TailAdmin dashboard template locally, ensure you have Node.js 18.x or later installed. Follow these steps to clone the repository, install dependencies, and launch the development server.

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

1. Clone the repository:

   git clone https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template.git

2. Install dependencies: Use npm or yarn to install the required packages.

   npm install
   # or
   yarn install

3. Start the development server: Run the start command to view the dashboard in your browser.

   npm run start
   # or
   yarn start

TailAdmin uses Alpine.js for reactivity. The entrypoint initializes Alpine and registers the @alpinejs/persist plugin, which allows you to persist data in local storage using the .persist() modifier in your HTML templates. The Alpine instance is also attached to the global window object.

import Alpine from "alpinejs";
import persist from "@alpinejs/persist";

Alpine.plugin(persist);
window.Alpine = Alpine;
Alpine.start();

While this repository is the HTML/Alpine.js version, TailAdmin provides specialized versions for other popular frameworks:

• Next.js: GitHub Repository
• React.js: GitHub Repository
• Vue.js: GitHub Repository
• Angular: GitHub Repository
• Laravel: GitHub Repository

Dropzone is used for file uploads. To initialize a dropzone area, ensure your target element has the ID #demo-upload. The default configuration targets the /file/post endpoint.

// Ensure the element exists before initializing
const dropzoneArea = document.querySelectorAll("#demo-upload");

if (dropzoneArea.length) {
  let myDropzone = new Dropzone("#demo-upload", { url: "/file/post" });
}

The dashboard provides a global search experience with keyboard shortcuts. To use this pattern, your HTML must include elements with the IDs #search-input and #search-button.

Supported shortcuts:

• Cmd + K (Mac) or Ctrl + K (Windows/Linux)
• / key (when the search input is not already focused)

The template includes a pattern for a 'copy to clipboard' UI component. It requires three specific IDs in your HTML:

1. copy-input: The container/wrapper.
2. website-input: The input field containing the text to copy.
3. copy-button: The button that triggers the copy.
4. copy-text: The element (usually a span) that displays the 'Copied' status message.

The dashboard uses flatpickr for date selection. To use the pre-configured datepicker, add the .datepicker class to your input element. The default configuration uses a range mode, a custom date format (M j), and replaces the 'to' separator with a hyphen in the input value.

// Target elements with the .datepicker class
flatpickr(".datepicker", {
  mode: "range",
  static: true,
  monthSelectorType: "static",
  dateFormat: "M j",
  // ... other config
});