Sliced - Sveltekit Documentation 1.4.0
🙏 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 Olverlay --> <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 Olverlay --> <!-- 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 packagies.
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
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