svelte-gui

A complete app shell, component library and utility toolkit for building modern SvelteKit applications with optional Pocketbase backend.

What is Svelte GUI?

Svelte GUI provides everything you need to build modern web applications:

• UI Components - Ready-to-use, fully typed components
• Design System - Consistent styling with Tailwind CSS
• Utilities - Toast notifications, form validation, theme management
• TypeScript Support - Full type safety throughout
• PocketBase Integration - Optional full-stack backend support

Library Structure

src/lib/
├── components/
│   ├── partials/       # Form, layout, data, feedback components
│   ├── main/           # Core app components
│   └── icons/          # Icon library (100+ icons)
├── api/                # API Client integration
└── utils/              # Utilities and helpers

Core Features

• Component Composition - Small, focused components that work together
• Mobile Responsive - Mobile-first design and touch support
• Accessibility - WCAG compliant with keyboard navigation
• Performance - Optimized bundle size and runtime performance
• Dark Mode - Built-in theme switching with persistence

Technology Stack

• Svelte 5 - Components with runes
• SvelteKit - Routing framework
• Pocketbase - Optional backend
• TypeScript - Type safety & IDE support
• Tailwind CSS 4 - Utility-first styling
• Vite - Build tool and dev server

Perfect For

• SaaS dashboards and admin panels
• E-commerce applications
• Internal tools and data dashboards
• Progressive web applications
• Content management systems