Neo-Brutalist SvelteKit Platform Template

A production-ready platform application template built with SvelteKit, TypeScript, TailwindCSS, and shadcn-svelte, styled with a neo-brutalist design system.

This repository is intended as a foundation for SaaS dashboards, internal tools, AI platforms, admin panels, and data-driven applications.

✨ Features

• SvelteKit + TypeScript (modern, fast, scalable)
• TailwindCSS for styling with a custom neo-brutalist theme
• shadcn-svelte component primitives
• Fully structured platform layout:
  • Sidebar navigation
  • Top header with breadcrumbs
  • Responsive design (desktop → mobile)
• Modular pages ready to extend:
  • Dashboard
  • Users
  • Chat
  • Logs
  • Settings
  • Admin
  • Integrations
  • Data
• Command palette (⌘K / Ctrl+K)
• Light / Dark mode
• Mock data layer (no backend required initially)
• Clean, readable codebase designed for long-term evolution

🧱 Tech Stack

📁 Project Structure

src/ ├─ routes/ │ ├─ dashboard/ │ ├─ users/ │ ├─ chat/ │ ├─ logs/ │ ├─ settings/ │ ├─ admin/users/ │ ├─ integrations/ │ ├─ data/ │ ├─ docs/ │ └─ status/ │ ├─ lib/ │ ├─ components/ # App shell + shared UI │ ├─ ui/ # shadcn + themed components │ ├─ mock/ # Mock data (users, logs, chat, etc.) │ ├─ stores/ # Global state │ ├─ types.ts # Shared TypeScript types │ └─ theme.ts # Neo-brutalist design tokens │ ├─ app.html ├─ app.css └─ hooks.server.ts

🎨 Neo-Brutalist Design System

This template uses a controlled neo-brutalist style, focused on:

• Thick borders
• Offset hard shadows
• Flat surfaces (no gradients)
• High contrast colors
• Bold typography
• Minimal animation

Design tokens live in:

src/lib/ui/theme.ts

Tailwind utilities for borders, shadows, and spacing are configured in:

tailwind.config.js and src/app.css

The brutal utilities (brutal-card, brutal-button, brutal-input, brutal-shadow-*) are defined in src/app.css and can be used throughout the application.

This allows the aesthetic to be adjusted or softened without rewriting components.

🚀 Getting Started

1) Install dependencies

pnpm install
# or
npm install

2) Run the dev server

pnpm dev
# or
npm run dev

Open http://localhost:5173

3) Typecheck + Lint

pnpm check
pnpm lint

4) Build

pnpm build
pnpm preview

⸻

🧪 Mock Data

The app runs entirely on mock data by default.

Mock sources live in:

src/lib/mock/

Each page loads data via +page.ts so replacing mocks with real APIs later is trivial.

⸻

🧭 Navigation & Modules

The sidebar includes: • Dashboard – overview metrics + activity • Users – list, search, roles, details • Chat – threaded chat layout • Logs – filterable system logs • Integrations – connect external services • Data – datasets, uploads, schemas • Settings – application preferences • Admin / Users – admin-only user management

All modules are intentionally decoupled and replaceable.

⸻

🔧 Adding a New Module 1. Create a new route:

src/routes/my-module/+page.svelte

2.    Add mock data (optional):

src/lib/mock/my-module.ts

3.    Register it in the sidebar:

src/lib/components/app-shell/nav-config.ts

That’s it.

⸻

🔐 Authentication & Backend

This template does not enforce any auth or backend choice.

It is designed to integrate cleanly with: • Supabase • Auth.js • Custom APIs • Internal tools • AI / LLM backends

⸻

📦 Intended Use

This template is ideal for: • AI platforms • SaaS dashboards • Admin panels • Internal tools • Data platforms • Experimentation frameworks

It is not a landing page or marketing site.

⸻

🛣️ Roadmap Ideas (Optional) • Auth + role-based access • Real API adapters • Server-side logging • Audit trails • Feature flags • Plugin system • Workspace / multi-tenant support

⸻

🧠 Philosophy

This repo favors: • Explicit structure over magic • Readability over cleverness • Reusability over one-off hacks • UI consistency over visual novelty

You can build fast — and still sleep at night.

⸻

📄 License

MIT — use it, fork it, break it, ship it.