Project Overviewlink

Opatix is a backend admin template and UI component library based on Tailwind CSS 3, featuring complete page examples including dashboards, forms, charts, tables, maps, etc. It is suitable for quickly building enterprise-level admin panels or SaaS product interfaces. The template uses Gulp for build automation and supports SCSS and PostCSS.

Tech Stacklink

• Tailwind CSS 3.4.x
• Gulp 4.x (Build Tool)
• SCSS / PostCSS
• Chart.js, ApexCharts, Morris.js (Charts)
• DataTables (Tables)
• FullCalendar (Calendar)
• Google Maps / JSVectorMap (Maps)
• Quill (Rich Text Editor)
• Dropzone (File Upload)
• SweetAlert2, Preline UI (Interactive Components)

Project Structurelink

Admin/
  gulpfile.js          # Gulp build configuration
  package.json         # Dependency declarations
  tailwind.config.js  # Tailwind CSS configuration
  yarn.lock
  src/                 # Page source files
    index.html         # Dashboard homepage
    starter-page.html  # Blank starter page
    app-calendar.html  # Calendar page
    app-contacts.html  # Contact management
    app-gallery.html   # Gallery page
    app-plans.html     # Plan management
    charts-apex.html   # Apex charts
    tables-basic.html  # Basic tables
    forms-*.html       # Various form pages (8)
    ui-*.html          # UI component examples (18)
    icons.html         # Icon showcase
    maps-vector.html   # Vector maps
Documentation/
  index.html           # Online documentation entry

Core File Descriptionslink

• src/index.html — Dashboard homepage, displaying statistics cards, revenue charts, and team activities
• src/starter-page.html — Blank starter page, can be used as a template base for new pages
• gulpfile.js — Gulp task definitions, including compilation, minification, hot reload, etc.
• tailwind.config.js — Tailwind CSS theme configuration and plugin extensions
• package.json — Complete dependency list, covering UI components, chart libraries, and build tools
• Documentation/index.html — Template usage documentation with screenshots and step-by-step instructions

Quick Startlink

# Install Node.js (v18+ recommended)

# Install Gulp CLI globally
npm install gulp -g

# Navigate to Admin directory and install dependencies
cd Admin
yarn install

# Start development server (compilation + hot reload)
gulp

# Build production version only
gulp build

Usage Recommendationslink

It is recommended to copy and create new pages based on starter-page.html within the src directory, and achieve consistent global layout by modifying module files in partials (sidebar, top bar, footer). Use gulp build to generate minified assets for production deployment.