https://github.com/magooney-loon/svelte-gui
Web app shell & template
https://github.com/magooney-loon/svelte-gui
component-library gui pocketbase svelte sveltekit sveltekit-tailwindcss sveltekit-template typescript
Last synced: 15 days ago
JSON representation
Web app shell & template
- Host: GitHub
- URL: https://github.com/magooney-loon/svelte-gui
- Owner: magooney-loon
- License: agpl-3.0
- Created: 2025-11-14T19:00:29.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-02-25T14:32:31.000Z (4 months ago)
- Last Synced: 2026-02-25T18:05:45.351Z (4 months ago)
- Topics: component-library, gui, pocketbase, svelte, sveltekit, sveltekit-tailwindcss, sveltekit-template, typescript
- Language: Svelte
- Homepage: https://svelte-gui.vercel.app
- Size: 294 KB
- Stars: 5
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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/](https://svelte-gui.vercel.app/) |
| **IMG2GIF Tool** | Real-world application using Svelte GUI for image conversion | [https://bubi-gif.vercel.app/](https://bubi-gif.vercel.app/) |
| **PB Deployer** | PocketBase deployment tool (uses an older alpha version) | [https://github.com/magooney-loon/pb-deployer](https://github.com/magooney-loon/pb-deployer) |
| **Algo Trading Bot** | Algorithmic trading interface powered by Svelte GUI | [[yeti-claw](https://yeti-claw.com/)] |
## 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
```bash
git clone https://github.com/magooney-loon/svelte-gui.git
cd svelte-gui
```
### 2. Install Dependencies
```bash
npm install
```
### 3. Start Development
```bash
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
```bash
git clone https://github.com/magooney-loon/pb-ext.git
cd pb-ext
```
### 2. Add Svelte GUI to Frontend
```bash
git clone https://github.com/magooney-loon/svelte-gui.git frontend
```
### 3. Follow pb-ext Documentation
Refer to the [pb-ext repository](https://github.com/magooney-loon/pb-ext) for setup and running instructions specific to that project.
---