Svelte Gui
Web app shell & template
Svelte GUI Overview
A complete app shell, component library and utility toolkit for building modern SvelteKit applications with optional Pocketbase backend.
šØ Showcase
See Svelte GUI in action with these live examples:
| Demo | Description | Link |
|---|---|---|
| Demo Website | Full-featured demo showcasing all components and features | https://svelte-gui.vercel.app/ |
| IMG2GIF Tool | Real-world application using Svelte GUI for image conversion | https://bubi-gif.vercel.app/ |
| PB Deployer | PocketBase deployment tool (uses an older alpha version) | https://github.com/magooney-loon/pb-deployer |
| Algo Trading Bot | Algorithmic trading interface powered by Svelte GUI | Video Demo |
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
Installation Guide
Option 1: Standalone Svelte GUI
Clone and run the Svelte GUI application directly.
1. Clone the Repository
git clone https://github.com/magooney-loon/svelte-gui.git
cd svelte-gui
2. Install Dependencies
npm install
3. Start Development
npm run dev
Your app is now running at http://localhost:5173 with all components, themes, and utilities ready to use.
Option 2: Full-Stack with PocketBase Extension
Use the PocketBase extension and add Svelte GUI as the frontend.
1. Clone PocketBase Extension
git clone https://github.com/magooney-loon/pb-ext.git
cd pb-ext
2. Add Svelte GUI to Frontend
git clone https://github.com/magooney-loon/svelte-gui.git frontend
3. Follow pb-ext Documentation
Refer to the pb-ext repository for setup and running instructions specific to that project.
