Quick Start

Accelerate your development with this outstanding theme!

Recommendation: For the best experience running the DashTail Alpine template, use tools like the VS Code Live Server extension or npx http-server.

Starter Template

Use the following HTML snippet as a quick and simple starting point for creating a new blank page.

<!doctype html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="" />
  <title>Dashtail Alpine</title>
  <!-- Fav Icon -->
  <link rel="icon" type="image/png" href="./assets/images/favicon.ico" />
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
  <style>
    [x-cloak] {
      display: none !important;
    }
  </style>
 
  <!-- Include App CSS -->
  <link rel="stylesheet" href="./assets/css/app.css" />
 
  <!-- Helper JS -->
  <script src="./assets/js/alpinejs-twmerge.js"></script>
  <script defer src="./assets/js/alpinejs-collapse.js"></script>
  <script defer src="./assets/js/alpinejs-focus.js"></script>
  <script defer src="./assets/js/alpine.js"></script>
 
  <!-- App JS -->
  <script src="./assets/js/app.js"></script>
 
</head>
 
   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

Here is the list of supported scripts.

app.css: The primary CSS file assets/css/app.css that contains the main styles for the application.
app.js: The primary JS file assets/js/app.js that contains the main script for the application.
alpinejs-twmerge.js: A utility script assets/js/alpinejs-twmerge.js for seamlessly merging Tailwind CSS classes dynamically.
alpinejs-collapse.js: Adds functionality assets/js/alpinejs-collapse.js for creating collapsible elements with Alpine.js.
alpinejs-focus.js: Provides focus management utilities assets/js/alpinejs-focus.js to enhance accessibility and interactivity.
alpine.js: The core Alpine.js library assets/js/alpine.js for building lightweight, reactive JavaScript components.
mapbox-gl.css: The stylesheet assets/css/mapbox-gl.css for styling Mapbox GL components.
mapbox-gl.js: The JavaScript library assets/js/mapbox-gl.js for integrating interactive Mapbox GL maps into the application.
apexchart.js: The JavaScript library assets/js/apexchart.js for creating modern and interactive charts.
chart.js: The core Chart.js library assets/js/chart.js for building responsive and versatile chart visualizations.
chartjs.js: An additional script assets/js/chartjs.js for extended functionalities or customizations with Chart.js.
fullcalendar.js: The JavaScript library assets/js/fullcalendar.js for implementing full-featured, drag-and-drop event calendars.
calendar.js: A supporting script assets/js/calendar.js for custom calendar-related functionalities.
leaflet.css: The stylesheet assets/css/leaflet.css for styling interactive maps provided by the Leaflet library.
quill.snow.css: The stylesheet assets/css/quill.snow.css for the Snow theme of the Quill rich text editor.
leaflet.js: The JavaScript library assets/js/leaflet.js for embedding interactive maps into your application.
quill.js: The JavaScript library assets/js/quill.js for integrating the Quill rich text editor into your application.
jsvectormap.min.css: The stylesheet assets/css/jsvectormap.min.css for styling interactive vector maps provided by the JSVectorMap library.
jsvectormap.js: The JavaScript library assets/js/jsvectormap.js for creating interactive vector maps in your application.
jsvectormap-world.js: The JavaScript file assets/js/jsvectormap-world.js containing the world map data for use with JSVectorMap.

These scripts provide various functionalities to enhance your application's interactivity, visualization, and user interface components.

Documentation

Documentation provides clear instructions and guidance to help you navigate through DashTail Alpine effortlessly.

Installation Folder Structure