Sliced - Sveltekit Documentation 1.5.1
🙏 Thank you for purchasing Sliced - Sveltekit(v2.0) Admin Dashboard Template.
If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.Support Email: sup.srbthemes@gmail.com
Introduction
Sliced - Sveltekit is a powerful admin dashboard template built with Tailwind CSS. Sliced comes with dozens of functional designs to help you get started quickly. With a wide range of beautiful styles and a full-screen layout, it's a perfect fit for admin dashboards, eCommerce, CRM, CMS, LMS panels and etc. If you are looking to take your app to the next level - Sliced is the way to go!
Getting Started Guide
This guide will walk you through the installation process and prerequisites to get your admin dashboard up and running smoothly.
Task | Instructions |
---|---|
Node.js | Make sure to have the Node.js 20 installed & running in your computer. If you already have installed Node.js on your computer, you can skip this step. |
npm OR yarn | Make sure to have npm/yarn installed & running in your computer. If you already have installed Nodejs than npm is default installed. |
Installation
Follow these simple steps to install and set up Sliced Admin Template:
Step 1: Unzip
Unzip The Downloaded Folder and open it
in vscode or any other code editor you use.
Step 2: Download dependencies by running following command:
yarn OR npm i
Step 3: Start development server by running following command:
yarn dev or npm run dev
Here we go, The development server is accessible at http://127.0.0.1:5173. Enjoy your dev journey with Scliced Admin Template.
File Structure
├── 📁 Admin | ├── 📁 src | | ├──📁 lib | | | ├──📁 Components | | | ├──📁 css | | | ├──📁 fonts | | | ├──📁 js | | | └──📁 stores | | ├──📁 routes | | | ├──📄 +page.svelte | | | ├──📄 +error.svelte | | | ├──📁 (layout-default) | | | └──📁 (layout-page) | ├── 📁 static | | └── 📁 assetsn> | ├── 📄 .gitignore | ├── 📄 .npmrc | ├── 📄 package.json | ├── 📄 package-lock.json | ├── 📄 tailwind.config | └── 📄 vite.config
<script> import { browser } from "$app/environment"; import Footer from "$lib/Components/Layouts/Footer.svelte"; import Sidebar from "$lib/Components/Layouts/Sidebar.svelte"; import Topbar from "$lib/Components/Layouts/Topbar/Topbar.svelte"; import { onMount } from "svelte"; import {page} from "$app/stores"; //states let isSidebarOpen = false; function toggleSidebar() { document.body.classList.toggle("toggle-sidebar"); isSidebarOpen = !isSidebarOpen; } function toggleDirection() { let direction = document.dir; direction = direction == "ltr" ? "rtl" : "ltr"; document.dir = direction; localStorage.setItem("direction", direction); } onMount(() => { if (!browser) return; let direction = localStorage.getItem("direction") || document.dir; if (!localStorage.getItem("direction")) { localStorage.setItem("direction", direction); } document.dir = direction; }); </script> <svelte:head> <!-- Site Tiltle --> <title>Sliced - Tailwind CSS Admin & Dashboard Template</title> <!-- Favicon Icon --> <link rel="shortcut icon" href="/assets/images/favicon.ico" /> </svelte:head> <!-- Start Layout --> <div class="bg-[#f9fbfd] dark:bg-dark text-black"> <!-- Start detached bg --> <div style="background-image: url('/assets/images/bg-main.png');" class="bg-black min-h-[220px] sm:min-h-[250px] bg-bottom fixed hidden w-full -z-50 detached-img" ></div> <!-- Start Menu Sidebar Overlay --> <div class={`fixed inset-0 bg-black60 dark:bg-dark90 z-999lg:hidden isSidebarOpen ? "hidden" : ""}`} on:clickself={toggleSidebar} on:keydown={toggleSidebar} role="button" aria-label="Close sidebar" aria-pressed="false" tabindex="0" id="sidebar-overlay" ></div> <!-- End Menu Sidebar Overlay --> <!-- Start Main Content --> <div class="flex mx-auto main-container"> <!-- Start Sidebar --> <Sidebar {isSidebarOpen} /> <!-- Start Content Area --> <div class="flex-1 main-content"> <!-- Start Topbar --> <Topbar on:OPEN_SIDEBAR={toggleSidebar} /> <!-- Start Content --> <div class="h-[calc(100vh-60px)] relative overflow-y-auto overflow-x-hidden p-4 space-y-4 detached-content" > <slot><!-- page fallback --></slot> <!-- Start Footer --> <Footer /> </div> <!-- End Content --> </div> <!-- End Content Area --> </div> </div> <!-- End Layout --> <button type="button" class="fixed z-50 px-4 text-white border-gray-200 shadow-lg h-11 ltr:right-0 rtl:left-0 bg-purple ltr:rounded-l-md rtl:rounded-r-md top-1/3" on:click={toggleDirection} > <span class="rtl:hidden">RTL</span> <span class="ltr:hidden">LTR</span> </button>
Layout
Layouts covers all theme configuration settings if you want to apply manually in project.
Layout Name | Details |
---|---|
Creative |
You can set manually by adding
layout class from <body class="detached"> |
Detached
|
You can set manually by adding layout class from <body class="detached detached-simple">
|
CSS
Sliced Built with latest version of CSS3.
File Name | Details |
---|---|
css/style.css |
Tailwind CSS |
css/swiper-bundle.min.css
|
Swiper CSS |
css/fancybox.css |
Fancybox CSS |
css/accordion.min.css
|
Accordion CSS |
Credit & Resources
We have used the following plugins and packages.
Support
Thank you for become a part of us. If you have any query, suggestion and complain. Contact us anytime.
- sup.srbthemes@gmail.com
Changelog
Angular 18
Vue
Blazor
NodeJs
React
Svelte
CakePHP
Yii2
Laravel 11
PHP
Symfony
CodeIgniter
Added Authentication features using Breeze
Added Profile and Password Update Features
Added Vite Support
Added Project & Ecommerce Dashboards
Added Calender App
Added LTR & RTL Supported
TailwindCSS v3.4.1
Layout and Components updated
Initial Released