Introduction

Nilova – Svelte Typescript Premium Admin & Dashboard Template for All Your Web Projects

Nilova – Svelte Typescript Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using Svelte , Vite , CSS3 and TS offering seamless customization with SASS integration. Whether you’re building a web application, admin dashboard, or project management platform, this template ensures your site stands out with ease.

Support and Updates:

When you purchase Nilova, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

Dependencies for Nilova

What Do You Get with the Nilova:

Nilova provides all necessary Svelte, CSS, SCSS, ts files, along with detailed Documentation to help you easily customize and implement the template.

  • All Svelte Files
  • CSS Files
  • SCSS Files
  • Ts Files
  • Documentation

Nilova Compatibility with Popular Browsers:

Nilova is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

  • Firefox
  • Safari
  • Opera
  • Chrome
  • Edge

Getting Start Guide

Setting Up The Local Environment & Workspace

This comprehensive guide provides step-by-step instructions on how to set up your development environment for Svelte tool. It covers everything from the necessary prerequisites to installing the tool, creating an initial workspace, and setting up a starter app. You'll also learn how to run the app locally to test and verify your setup. By following this guide, you can ensure that your development environment is properly configured for Svelte, and you can get started with your project confidently and efficiently. Whether you're a beginner or an experienced developer, this guide is an essential resource for anyone looking to work with Svelte.

To get started with a Svelte application, there are three prerequisites that you need to have in place.

Prerequisites
To use the Svelte Framework, you should be familiar with the following:
  • Svelte
  • Sveltestrap
Knowledge of Sveltestrap and Typescript is helpful.

Installation Process

How to Run the Nilova Template:
Step 1:
Download the project, extract it, and navigate to the final template folder named Nilova-Svelte TS Final. Open the template to proceed.
Step 2:
Open your terminal or command prompt and run the following command to install the packages:

code

npm install
(Or)

code

yarn install
Step 3:
After the installation, run the project using the following command:

code

npm run dev
(Or)

code

yarn run dev

Once you serve your application by default it will take their default port using http://localhost:5173/

How to Convert SCSS to CSS:
If you need to change any styles, modify the SCSS files. To convert SCSS to CSS, run the following command:

code

npm run sass

Note:

If your are using "npm install", You should need to delete the "yarn-lock file" from project root.

If your are using "yarn install", You should need to delete the "package-lock.json file" from project root.

To install the peer Depencies

In general, the npm i command is used to install all dependencies or devDependencies from a package. However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument can be used to force npm to install those dependencies.

Using the --force argument can be helpful when you need to install a specific dependency that is causing issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using the --force argument to ensure that everything is working as expected.

code

npm install --force

Skipping the installation of peer dependencies can sometimes lead to issues with the functionality or compatibility of the package. To ensure that your package functions correctly, it's important to manually install any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer dependencies required by each package and ensure that they are compatible with other packages in your project. By taking these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.

code

npm install--legacy-peer-deps

We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

For Build your Template

Build your application for host on server using below command:

code

npm run build
(Or)

code

yarn run build

"Similarly, the starter kit can be installed as well."

Installation Video

Folder Structure

StaterKit Guide

Purpose of a starter kit
Introduction to the Svelte Typescript Starter Kit Template:

The Svelte template starterkit is a resource that helps developers kickstart their Svelte web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building Svelte-based websites or applications.

Purpose of the Svelte Starter Kit Template:

The purpose of the Svelte Starter Kit Template is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Svelte projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the Svelte Starter Kit Template:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the Svelte Starter Kit Template, developers should have a basic understanding of Svelte and web development concepts.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Nilova-Svelte Typescript have more than 150 components.

We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link.

https://support.spruko.com/
Starterkit Folder Structure

  • Take a quick look at the folder structure of the "Starterkit."
  • Integration of your customized Svelte pages becomes easy when using the "Starterkit."
  • The "Starterkit" provides all the layout components, related assets, and plugins.
  • To explore the contents of the "Starterkit," unzip the project folder received after purchase.

Main Layout

Basic Layout Structure

Main Layout structure of the Nilova template .Root:src/routes/(common-layout)/+layout.svelte

svelte

                                            
  <script lang="ts">
  import { onMount } from "svelte";
  import "../../assets/scss/app.scss";
  import Switcher from "$lib/components/layout-components/switcher/Switcher.svelte";
  import Sidebar from "$lib/components/layout-components/sidebar/Sidebar.svelte";
  import Footer from "$lib/components/layout-components/footer/Footer.svelte";
  import Header from "$lib/components/layout-components/header/Header.svelte";
  import BackToTop from "$lib/components/layout-components/backToTop/BackToTop.svelte";
  import { themeStore } from "../../lib/components/layout-components/switcher/switcher";

  let themeLoaded = false;
  let progressRef: any;

  onMount(() => {
    const handleScroll = () => {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const scrollHeight =
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight;
      const scrollPercent = (scrollTop / scrollHeight) * 100;

      if (progressRef) {
        progressRef.style.width = `${scrollPercent}%`;
      }
    };

    themeStore.retrieveUserLocalStorage();
    themeLoaded = true;

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  });

  //  offcanvas handling via props
  let isOpen = false;
  const toggle = () => (isOpen = !isOpen);
</script>

<div style={`display: ${themeLoaded ? "block" : "none"};`}>
  <div bind:this={progressRef} class="progress-top-bar">
</div>
  <Switcher {isOpen} {toggle} />
  <div class="page">
    <Header {toggle} />
    <Sidebar />
    <div class="main-content app-content">
      <div class="container-fluid page-container main-body-container">
        <slot />
      </div>
    </div>
    <Footer />
  </div>
  <BackToTop />
</div>

Svelte File Structure

General Svelte file structure of the Nilova template .Root:src/routes/(common-layout)/pages/empty/+page.svelte

svelte

    
<script lang="ts">
    import { Card, CardBody, Col, Row } from "@sveltestrap/sveltestrap";
    import Pageheader from "$lib/components/layout-components/page-header/Pageheader.svelte";
</script>

<!-- Page Title -->
<svelte:head>
    Empty | Nilova - Svelte Admin & Dashboard Template
</svelte:head>
<!-- Page Title Close -->
<!-- Page Header -->
<Pageheader homepage="Empty" activepage="Pages" page="Empty" />
<!-- Page Header Close -->

<!-- Start::row-1 -->

<Row>
    <Col xl={12}>
        <Card class="custom-card">
            <CardBody>
                <h6 class="mb-0">Empty Card
            </CardBody>
        </Card>
    </Col>
</Row>

<!--End::row-1 -->

SideMenu Guide

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In Svelte project, it can be easy to add menus to the sidebar by modifying the menuData array in the nav.ts (src/lib/components/layout-components/sidebar/nav.ts) file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows

Steps:
Open nav.ts File:

Open the nav.ts (src/lib/components/layout-components/sidebar/nav.ts) file in Svelte project. This file contains the menuData array that defines the menus to be displayed in the sidebar.

To add the parent Menu Items:

Inside the menuData array, you can add your menu items using the following format:

svelte

To add the children to Menu Items:

Inside the menuData array, you can add custom nested menu items using the following format:

svelte

Save the Changes:

After adding your menu items, save the changes made to the nav.ts (src/lib/components/layout-components/sidebar/nav.ts) file.

View Sidebar Changes:

The sidebar will now automatically display the added menu items based on the modifications you made in the menuData array.

To Remove the Menu Items:

To remove menu items that you don't need, you can simply delete the corresponding object from the menuData array.

By following these steps, you can easily customize and add menus to the sidebar of your Svelte project. The menus will be dynamically generated based on the content of the menuData array in the nav.ts file.

Routing

SvelteKit, the modern framework for building Svelte applications, uses a simple and intuitive routing system based on the file structure of your project. This approach, known as file-based routing, provides developers with a straightforward way to define routes and organize their application views.
Note:
In a SvelteKit project, the routes directory serves as the cornerstone of routing. Each file or folder inside this directory represents a unique route in the application.

In SvelteKit you create routes by adding files and folders inside the routes directory. Each folder or file corresponds directly to a URL path in your application. For example, creating a file routes/(common-layout)/dashboards/sales/+page.svelte automatically defines the /about route.

svelte

/sales/+page.svelte corresponds to the root route (/),  while /dashboards/sales corresponds to /sales.
Basic Route

Following are the fundamental building blocks to creating a route.

svelte


        <script lang="ts">

        </script>

        <ul>
            <li>
                <a href="/dashboards/sales">Sales
                </a>
            </li>
            <li>
                <a href="/dashboards/analytics">Analytics
                </a>
            </li>
        </ul>
Configure Link in Menu
To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

svelte


├──components
		├── layout-components
			├──sidebar
				├──Sidebar.svelte
				├──nav.ts

				export const menuData = [
					{
						menutitle: "Main",
						children: [
							{
								title: "Dashboards",
								icon: "bx-home",
								badge: "12",
								badgeClass: "warning",
								children: [
									{
                                      path: "/dashboards/sales",
                                      type: "link",
                                      active: false,
                                      selected: false,
                                      dirchange: false, 
                                      title: "Sales",
                                    },
                                    {
                                      path: "/dashboards/analytics",
                                      type: "link",
                                      active: false,
                                      selected: false,
                                      dirchange: false, 
                                      title: "Analytics",
                                    },
								],
							},
						]
					},
				]

SCSS to CSS

Introduction :

This documentation outlines the process of converting SCSS (Sassy CSS) files to standard CSS (Cascading Style Sheets) in a project's assets directory using the SASS package. SCSS is a preprocessor for CSS, and SASS is a popular choice for transforming SCSS into CSS efficiently. This guide provides step-by-step instructions on installing the SASS package, configuring it in your project, and converting SCSS files to CSS.

  • Prerequisites

    Before proceeding, ensure that you have the following prerequisites:

    Node.js installed on your system.

    A project directory with SCSS files that you want to compile into CSS.

Installation :

Install the SASS package using npm (Node Package Manager) by running the following command:

code

npm install sass

This command will download and install the SASS package and its dependencies into your project.

Configuration :

To configure SASS for your project, follow these steps:

  • 1. Open your project's package.json file. If you don't have one, you can create it by running npm init and following the prompts.

  • 2. Inside the package.json file, locate the "scripts" section. If it doesn't exist, create one:

    code

    "scripts": {
 // ...existing scripts...
}

  • 3. Add a script that specifies the compilation process from SCSS to CSS. You can name the script as you prefer, but for this example, we'll name it "sass." The script should look like this:

    code

    
"scripts": {"sass": "sass ./src/assets/scss/:./src/assets/css/"}

    In the script above, replace ./src/assets/scss with the path to your SCSS files and ./src/assets/css with the destination directory for your compiled CSS files.

  • 4. Add a script that specifies the compilation compressed process from SCSS to CSS. You can name the script as you prefer, but for this example, we'll name it "sass-min." The script should look like this:

    code

    
"scripts": {
 "sass-min": "sass ./src/assets/scss/:./src/assets/css/ --style compressed"
}

    In the script above, replace ./src/assets/scss with the path to your SCSS files and ./src/assets/css with the destination directory for your compiled CSS files.

  • 5. Save the package.json file.

Compiling SCSS to CSS :

With the SASS package and script configured, you can now compile your SCSS files to CSS with the following steps:

  • 1. Open your terminal or command prompt.

  • 2. Navigate to your project's root directory if you're not already there.

  • 3. Execute the following command to run the "sass" script:

    code

    npm run sass

    This command will initiate the SCSS to CSS compilation process using the SASS package.

  • 4. Execute the following command to run the "sass-min" script:

    code

    npm run sass-min

    This command will initiate the SCSS to CSS compilation compressed process using the SASS package.

  • 5. Once the process is complete, the compiled CSS files will be generated in the specified destination directory (e.g., ./src/assets/css).

Conclusion :

You have successfully configured and used the SASS package to convert SCSS files to CSS in your project. This allows you to take advantage of SCSS's powerful features while ensuring that your web application uses standard CSS for styling.

Firebase Authentication Guide

Firebase SetUp

Step-1: Now run below commands inside our svelte project to install firebase latest.

next

step-2: Add firebase API configuration details(create database on firebase) to the firebase Auth Component refer the path (/shared/firebase/firebaseapi.tsx)

next

Firebase Revocation process

To remove firebase from the project make sure that you have to remove the firebase tab from the (routes\auth\login\+page.svelte).
Firebase installation process
image
image
image
image

FAQ'S

Step 1:

Go To style.scss (src/assets/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Step 2:

And paste Your Selected font-family in style.scss

Step 3:

And add the Your Selected font-family in _variables.scss(public/assets/scss/_variables.scss)

code

--default-font-family: "Space Grotesk", sans-serif;

By default menu icons are in the from remix icon if you want to change the icons please follow below steps
Step 1 :

To change Menu icons, open menusvg-icons.ts page Path: src\lib\components\layout-components\sidebar\menusvg-icons.ts and go through app-sidebar section, in that section you will find icon tag, there you can replace previous icon with your icon. Example as shown in below

next

Go To ""static/images/brand-logos"" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

Step1:

To clear LocalStorage loading functions you need to remove retrieveUserLocalStorage() function in switcher src\libs\layout-components\switcher\switcher.ts as shown below

typescript

retrieveUserLocalStorage()
Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like retrieveUserLocalStorage in layout.svelte routes/(common-layout)/layout.sveltefile.Below are the some examples to find out.

svelte

    
themeStore.retrieveUserLocalStorage();

Step1:

Open Header.svelte component src\libs\components\layout-components\header\Header.svelte

To remove switcher section as shown below.

                                                                
<li className="header-element">
    <a scroll={false} href="#!" className="header-link switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas" on:click={toggle} >
        <svg xmlns="http://www.w3.org/2000/svg" className="header-link-icon" viewBox="0 0 256 256">
        <rect width="256" height="256" fill="none" />
        <path d="M207.86,123.18l16.78-21a99.14,99.14,0,0,0-10.07-24.29l-26.7-3a81,81,0,0,0-6.81-6.81l-3-26.71a99.43,99.43,0,0,0-24.3-10l-21,16.77a81.59,81.59,0,0,0-9.64,0l-21-16.78A99.14,99.14,0,0,0,77.91,41.43l-3,26.7a81,81,0,0,0-6.81,6.81l-26.71,3a99.43,99.43,0,0,0-10,24.3l16.77,21a81.59,81.59,0,0,0,0,9.64l-16.78,21a99.14,99.14,0,0,0,10.07,24.29l26.7,3a81,81,0,0,0,6.81,6.81l3,26.71a99.43,99.43,0,0,0,24.3,10l21-16.77a81.59,81.59,0,0,0,9.64,0l21,16.78a99.14,99.14,0,0,0,24.29-10.07l3-26.7a81,81,0,0,0,6.81-6.81l26.71-3a99.43,99.43,0,0,0,10-24.3l-16.77-21A81.59,81.59,0,0,0,207.86,123.18ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z" opacity="0.2" />
        <circle cx="128" cy="128" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
        <path d="M41.43,178.09A99.14,99.14,0,0,1,31.36,153.8l16.78-21a81.59,81.59,0,0,1,0-9.64l-16.77-21a99.43,99.43,0,0,1,10.05-24.3l26.71-3a81,81,0,0,1,6.81-6.81l3-26.7A99.14,99.14,0,0,1,102.2,31.36l21,16.78a81.59,81.59,0,0,1,9.64,0l21-16.77a99.43,99.43,0,0,1,24.3,10.05l3,26.71a81,81,0,0,1,6.81,6.81l26.7,3a99.14,99.14,0,0,1,10.07,24.29l-16.78,21a81.59,81.59,0,0,1,0,9.64l16.77,21a99.43,99.43,0,0,1-10,24.3l-26.71,3a81,81,0,0,1-6.81,6.81l-3,26.7a99.14,99.14,0,0,1-24.29,10.07l-21-16.78a81.59,81.59,0,0,1-9.64,0l-21,16.77a99.43,99.43,0,0,1-24.3-10l-3-26.71a81,81,0,0,1-6.81-6.81Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" />
    </svg>
        </a>
    </li>
Step2:

Remove the switcher component from the main layout follow the path and also remove the toggle prop in header component Path: src/routes/(common-layout)/+layout.svelte 


        <script>                                                                 
        import Switcher from "$lib/components/layout-components/switcher/Switcher.svelte";
         //  offcanvas handling via props
           let isOpen = false;
           const toggle = () => (isOpen = !isOpen);
        </script> 
        <Switcher {isOpen} {toggle} />
        <Header {toggle} />
Step3:

Now remove the switcher component and switcher file from the root folder, follow the path Switcher component $lib/components/layout-components/switcher/Switcher.svelte

Step1:

Open +layout.svelte component src/routes/(landing-layout)/+layout.svelte

To remove switcher section as shown below.In landing component remove only the prop what we are passing.


    <script>                                                                    
    import LandingSwitcher from "$lib/components/layout-components/switcher/LandingSwitcher.svelte";
    // Landing offcanvas handling via props
    let isOpen: boolean = false;
    const toggle = () => (isOpen = !isOpen);
    </script>    
        <LandingSwitcher {isOpen} {toggle} />
        <Landing {toggle} />
Step2:

Now remove the landingswitcher component from the root folder, follow the path $lib/components/layout-components/switcher/LandingSwitcher.svelte and

Please follow the below steps to change Primary Color
Step 1 :

To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (src/assets/scss/_variables.scss )

Please follow the below steps to change Dark body Color
Step 1 :

Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

Step 2 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (public/assets/scss/_variables.scss )

Step 3 :

Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]

--light-rgb :
--form-control-bg :
--input-border :
--gray-3 :

Additional Plugins Included :

The following plugins have also been included, apart from the ones already listed in the above sections

Plugin Version URL
Svelte v5.55.2 https://svelte.dev/
Vite v8.0.7 https://www.npmjs.com/package/vite
Sveltestrap v7.1.0 https://sveltestrap.js.org/
sass v1.100.0 https://www.npmjs.com/package/sass
Swiper v12.2.0 https://swiperjs.com/get-started
Sweet alerts2 v11.26.25 https://sweetalert2.github.io/
Svelte Fullcalendar v3.0.0 https://fullcalendar.io/
dragula v3.7.3 https://www.npmjs.com/package/dragula/
leaflet v1.9.4 https://www.npmjs.com/package/leaflet
apexcharts v4.7.0 https://apexcharts.com/
chartjs v4.5.1 https://www.npmjs.com/package/chart.js/
echarts v6.1.0 https://www.npmjs.com/package/echarts
svrollbar v0.12.0 https://www.npmjs.com/package/svrollbar
cl-editor v2.3.0 https://www.npmjs.com/package/cl-editor
filepond v4.32.12 https://www.npmjs.com/package/filepond
gridjs v6.2.0 https://www.npmjs.com/package/gridjs
gridjs-svelte v2.1.1 https://www.npmjs.com/package/gridjs-svelte
nouislider v15.8.1 https://www.npmjs.com/package/nouislider
svelte-select v5.8.3 https://www.npmjs.com/package/svelte-select
date-picker-svelte v2.17.0 https://www.npmjs.com/package/date-picker-svelte
svelte-carousel v1.0.25 https://www.npmjs.com/package/svelte-carousel
@simonwep/pickr v1.9.1 https://www.npmjs.com/package/@simonwep/pickr
svelte-cleavejs v1.0.3 https://npm.io/package/svelte-cleavejs
filepond-plugin-image-preview v4.6.12 https://www.npmjs.com/package/filepond-plugin-image-preview
jsvectormap v1.7.0 https://www.npmjs.com/package/jsvectormap
sortablejs v1.15.7 https://www.npmjs.com/package/sortablejs
intro.js v8.3.2 https://www.npmjs.com/package/intro.js
svelte-tel-input v3.6.0 https://www.npmjs.com/package/svelte-tel-input
svelte-tags-input v7.0.2 https://www.npmjs.com/package/svelte-tags-input

Credit's

Icons Credit
Icons References
Bootstrap Icons https://icons.getbootstrap.com/
Boxicons https://boxicons.com/
Remix Icons https://remixicon.com/
Feather Icons https://feathericons.com/
Tabler Icons https://tabler-icons.io/
Line Awesome Icons https://icons8.com/line-awesome
Phosphor Icons https://phosphoricons.com/
Images Credit
Images References
Vecteezy https://www.vecteezy.com/
Iconscount https://iconscout.com/
Unsplash https://unsplash.com/
Png Tree https://pngtree.com/
flaticon https://www.flaticon.com/authors/flat-icons
freepik https://www.freepik.com
Fonts Credit
Font References
Google Fonts https://fonts.google.com/
Sidemenu Icons
Icon References
phosphor Icons https://phosphoricons.com/

Switcher styles

html

<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="transparent" data-width="fullwidth" data-menu-styles="transparent" data-page-style="flat" data-toggled="close"  data-vertical-style="doublemenu" data-toggled="double-menu-open">

Light:

html

data-theme-mode="light" data-header-styles="light" data-menu-styles="light"
Dark:

html

data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

LTR (Left to Right):

html

dir="ltr"
RTL (Right to Left):

html

dir="rtl"

Vertical:

html

data-nav-layout="vertical"
Horizontal:

html

data-nav-layout="horizontal" data-nav-style="menu-click"

Default:

Menu Click

data-nav-style="menu-click"
Menu Hover

html

data-nav-style="menu-hover"
Icon Click:

html

data-nav-style="icon-click"
Icon Hover:

html

data-nav-style="icon-hover"

Regular:

html

data-page-style="regular"
Classic:

html

data-page-style="classic"
Mordern:

html

data-page-style="modern"
Flat:

html

data-page-style="flat"

Default Width:

html

data-width="default"
Full Width:

html

data-width="full-width"
Boxed:

html

data-width="boxed"
Fixed:

html

data-menu-position="fixed"
Scrollable:

html

data-menu-position="scrollable"

Fixed:

html

data-header-position="fixed"
Scrollable:

html

data-header-position="scrollable"

Closed:

html

data-vertical-style="closed"
Icontext:

html

data-vertical-style="icontext"
Overlay:

html

data-vertical-style="overlay"
Detached:

html

data-vertical-style="detached"
Doublemenu:

html

data-vertical-style="doublemenu"

Enable:

html

loader="enable"
Disable:

html

loader="disable"

Light Style:

html

data-menu-styles="light"
Dark Style:

html

data-menu-styles="dark"
Color Style:

html

data-menu-styles="color"
Gradient Style:

html

data-menu-styles="gradient"
Transparent Style:

html

data-menu-styles="transparent"

Light Style:

html

data-header-styles="light"
Dark Style:

html

data-header-styles="dark"
Color Style:

html

data-header-styles="color"
Gradient Style:

html

data-header-styles="gradient"
Transparent Style:

html

data-header-styles="transparent"

Background Image Style-1:

html

data-bg-img="bgimg1"
Background Image Style-2:

html

data-bg-img="bgimg2"
Background Image Style-3:

html

data-bg-img="bgimg3"
Background Image Style-4:

html

data-bg-img="bgimg4"
Background Image Style-5:

html

data-bg-img="bgimg5"

Apexcharts :

ApexCharts is a Svelte wrapper for the popular ApexCharts library, enabling the easy creation of interactive, responsive charts. It offers a wide range of chart types and customization options with seamless Svelte integration.

image

svelte

svelte

svelte

Plugin Link

https://www.npmjs.com/package/apexcharts

Reference Link 

https://www.apexcharts.com/docs/installation/

Chartjs :

Chartjs is a Svelte wrapper for the popular Chartjs library, enabling the easy creation of interactive, responsive charts. It offers a wide range of chart types and customization options with seamless Svelte integration.

image

svelte

svelte

svelte

Plugin Link

https://www.npmjs.com/package/chart.js

Reference Link 

https://www.chartjs.org/docs/latest/

ECharts :

Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations.

image

svelte

svelte

svelte

Plugin Link

https://www.npmjs.com/package/echarts

Reference Link 

https://echarts.apache.org/examples/en/

Basic Table :

Svelte Basic tables are simple, customizable table components for displaying structured data in a clean and responsive layout.

image

svelte

svelte

Alerts :

The Alert component provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

svelte

svelte

Buttons :

The Button component is a user-friendly element in the interface that you can click on. It's designed for various tasks like triggering functions, sending form data, or navigating within an application. It also provides visual and interactive feedback to keep users informed about their actions.

svelte

data

Badges :

The Badge component is used to provide visual cues or supplementary information for things like badging, counts, and more.

svelte

data

Cards :

Sveltestrap Cards are versatile, customizable components for displaying content in a flexible, structured layout. They integrate Bootstrap’s card system with Sveltestrap, allowing you to create various types of content containers with options for images, headers, footers, and more, making them ideal for building rich, responsive UI elements.

svelte

Tooltips :

Sveltestrap Tooltips are small, customizable pop-up elements that provide additional information when users hover over or focus on an element. Built on sveletstrap's tooltip system, they offer easy integration in Svelte applications, supporting various customization options like positioning, trigger events, and animations for a better user experience

svelte

data

Popovers :

Sveltestrap Popovers are interactive components that display additional content or information when users click or hover over an element. Built on sveltestrap’s popover system, they offer easy integration in Svelte applications, with support for customizable content, placement, and triggers, allowing you to enhance the user interface with rich, contextual overlays.

svelte

data

List Group :

Sveltestrap ListGroup is a component for creating lists of items with consistent styling and behavior, using Bootstrap's list group system. It supports features like custom item content, active states, badges, and links, making it easy to build interactive and organized lists in React applications with full customization options.

svelte

data

Accordions :

Sveletstrap Accordion is a component that allows you to display collapsible content panels in a stack, ideal for organizing large amounts of content in a compact, interactive layout. It integrates with sveltestrap’s accordion system, supporting features like multiple or single panel expansion, custom styling, and smooth animations, making it easy to create dynamic, space-efficient UIs in Svelte applications.

svelte

data
Nilova- Premium Boostrap Admin Dashboard Template
Protfolio Buy Now Preview
Information
Need Help ?
Support Help Desk
Technical issues? Our support team is ready to help.
Help Desk
Pre-Sales
Have questions before purchasing? Contact our pre-sales team.
Send Mail
Pre-Sales Chat
Get immediate answers through our live chat support.
Live chat