3IT Services Admin Template

A production-ready SvelteKit admin dashboard template for 3IT Services projects.

Features

• SvelteKit 2.x + Svelte 5 with runes ($state, $derived, $props)
• Tailwind CSS v4 with glassmorphism dark theme
• Responsive layout with collapsible sidebar
• Reusable components (DataTable, Modal, PageHeader)
• Example CRUD pages (Users, Items)
• Settings page with multiple sections
• TypeScript throughout

Quick Start

1. Copy Template

cp -r 3it.services.templates/admin my-project/frontend
cd my-project/frontend

2. Install Dependencies

npm install

3. Configure Ports

Edit vite.config.ts:

server: {
  port: 51XX,        // Your frontend port
  proxy: {
    '/api': {
      target: 'http://localhost:71XX',  // Your backend port
      changeOrigin: true
    }
  }
}

4. Run Development Server

npm run dev

Project Structure

src/
├── routes/
│   ├── +layout.svelte     # App shell with sidebar
│   ├── +page.svelte       # Dashboard home
│   ├── users/             # User management
│   ├── items/             # Item management
│   └── settings/          # Settings page
├── lib/
│   ├── components/        # Reusable components
│   │   ├── DataTable.svelte
│   │   ├── Modal.svelte
│   │   └── PageHeader.svelte
│   ├── stores/            # Svelte stores
│   └── utils/             # Utility functions
├── app.css                # Global styles + Tailwind
└── app.html               # HTML template

Customization

Add New Page

1. Create route folder: src/routes/mypage/
2. Add page: src/routes/mypage/+page.svelte
3. Add to navigation in +layout.svelte

Add New Component

1. Create in src/lib/components/
2. Export from src/lib/components/index.ts

Connect to Backend

Replace mock data with API calls:

<script lang="ts">
  import { onMount } from 'svelte';

  let items = $state([]);

  onMount(async () => {
    const response = await fetch('/api/v1/items');
    items = await response.json();
  });
</script>

Modify Theme

Edit CSS variables in src/app.css:

@theme {
  --color-primary: #your-color;
  --color-bg-dark: #your-background;
}

Components

DataTable

Generic table with pagination:

<DataTable
  data={items}
  columns={[
    { key: 'id', label: 'ID' },
    { key: 'name', label: 'Name' },
    { key: 'price', label: 'Price', render: (item) => `$${item.price}` }
  ]}
  total={100}
  page={1}
  onPageChange={(p) => page = p}
>
  {#snippet actions(item)}
    <button onclick={() => edit(item)}>Edit</button>
  {/snippet}
</DataTable>

Modal

Dialog component:

<Modal open={showModal} title="Edit Item" onClose={() => showModal = false}>
  <form><!-- form content --></form>

  {#snippet footer()}
    <button onclick={save}>Save</button>
  {/snippet}
</Modal>

PageHeader

Page title with actions:

<PageHeader title="Users" description="Manage users">
  {#snippet actions()}
    <button>Add User</button>
  {/snippet}
</PageHeader>

Tech Stack

• SvelteKit 2.x
• Svelte 5 (runes)
• Tailwind CSS v4
• TypeScript
• Lucide Icons

License

MIT