Sneat Dashboard FREE by ThemeSelection

Quick Start 🚀

Jump-start your development using this amazing theme.

Info: To run Sneat template, Use local servers like XAMPP, WAMPP etc to avoid search and language json file path issue.

Starter Template

Use the below HTML snippet as a way to quickly start any new blank page.

Info: Sneat comes with and without customizer options. Read more

With Customizer
Without Customizer

<!DOCTYPE html>
<html lang="en" class="layout-navbar-fixed layout-menu-fixed " dir="ltr" data-skin="default" data-bs-theme="light"
  data-assets-path="../../assets/" data-template="vertical-menu-template-starter">

  <head>
    <meta charset="utf-8" />
    <title>Title</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet">

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="../../assets/vendor/fonts/iconify-icons.css" />
    <link rel="stylesheet" href="../../assets/vendor/fonts/fontawesome.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="../../assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../../assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
    <link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

    <!-- Helpers -->
    <script src="../../assets/vendor/js/helpers.js"></script>

    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="../../assets/js/config.js"></script>

  </head>

  <body>

    <h1>Hello, world!</h1>

    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="../../assets/vendor/libs/jquery/jquery.js"></script>
    <script src="../../assets/vendor/libs/popper/popper.js"></script>
    <script src="../../assets/vendor/js/bootstrap.js"></script>
    <script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
    <script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="../../assets/vendor/libs/hammer/hammer.js"></script>
    <script src="../../assets/vendor/js/menu.js"></script>
    <!-- endbuild -->

    <!-- Main JS -->
    <script src="../../assets/js/main.js"></script>
  </body>

</html>

<!DOCTYPE html>
<html lang="en" class="layout-navbar-fixed layout-menu-fixed " dir="ltr" data-skin="default" data-bs-theme="light"
  data-assets-path="../../assets/" data-template="vertical-menu-template-no-customizer-starter">

  <head>
    <meta charset="utf-8" />
    <title>Title</title>

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="../../assets/img/favicon/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=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet">

    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="../../assets/vendor/fonts/iconify-icons.css" />
    <link rel="stylesheet" href="../../assets/vendor/fonts/fontawesome.css" />

    <!-- Core CSS -->
    <link rel="stylesheet" href="../../assets/vendor/css/core.css" class="template-customizer-core-css" />
    <link rel="stylesheet" href="../../assets/css/demo.css" />

    <!-- Vendors CSS -->
    <link rel="stylesheet" href="../../assets/vendor/libs/node-waves/node-waves.css" />
    <link rel="stylesheet" href="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />

    <!-- Helpers -->
    <script src="../../assets/vendor/js/helpers.js"></script>

    <!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
    <!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
    
    <!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
    <script src="../../assets/js/config.js"></script>

  </head>

  <body>

    <h1>Hello, world!</h1>

    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <script src="../../assets/vendor/libs/jquery/jquery.js"></script>
    <script src="../../assets/vendor/libs/popper/popper.js"></script>
    <script src="../../assets/vendor/js/bootstrap.js"></script>
    <script src="../../assets/vendor/libs/node-waves/node-waves.js"></script>
    <script src="../../assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
    <script src="../../assets/vendor/libs/hammer/hammer.js"></script>
    <script src="../../assets/vendor/js/menu.js"></script>
    <!-- endbuild -->

    <!-- Main JS -->
    <script src="../../assets/js/main.js"></script>
  </body>

</html>

Info: Sneat use perfect-scrollbar.js(mandatory) as scrollbar plugin used in menu (navigation) and hammer.js(optional) for swipe to open menu(navigation) in touch (small) screen.

Core CSS: Core style files, i.e core.css/core-dark.css, template-*.css and demo.css
Vendors CSS: Third-party library style files, i.e perfect-scrollbar.css
Page CSS: Template page specific styes. i.e Profile Page
helpers.js File contain helpers methods. Must be include in <head> section.
template-customizer.js Required if using template with customizer. Read more...
config.js Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. Read more...
Core JS: Required core JS files, i.e jquery.js, popper.js, bootstrap.js etc...
Main JS: Main JS file for the JS plugin and function Init.
Page JS: Template page specific js. i.e Dashboard page js

Skin

By default Sneat use default theme using data-skin attribute to set skin option. You can change it or include your custom Skin.

<html class="layout-navbar-fixed layout-compact layout-menu-fixed" data-skin="default">

Theming

Sneat provides light and dark styles options. By default it provides light style.

To enable dark style you need to Set data-bs-theme attribute to dark on the <html> element instead of light.

<html class="layout-navbar-fixed layout-compact layout-menu-fixed" data-bs-theme="dark">

RTL support

By default Sneat provides RTL supported HTML template.

To enable RTL direction (mode), add dir="rtl" attribute to the <html> element.

<html dir="rtl">

Tip: If you don't want to use rtl supported style you can just update dir="ltr". That will load template in LTR.