v0.1.0 — Production Ready

HBHF Template

A production-ready SvelteKit template featuring Svelte 5 runes, Tailwind CSS 4, Bits UI components, and PocketBase integration. Built for speed and developer experience.

Tech Stack

5.37.0

Svelte 5

Runes & Snippets

2.21.0

SvelteKit

Node Adapter

4.1.0

Tailwind

Vite Plugin

0.36.1

PocketBase

Backend & SDK

Installation

1. Clone the template

$ git clone https://git.hbhf.is/olibuijr/hbhf-template.git my-project
$ cd my-project
$ rm -rf .git
$ git init

2. Install dependencies

$ npm install

3. Configure environment

$ cp .env.example .env
# Edit .env with your settings

Quick Start

Development

$ npm run dev

Starts the development server at http://localhost:5173

Production Build

$ npm run build
$ npm run preview

Creates optimized build in build/ directory

Available Scripts

Command	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run check`	Run TypeScript type checking

Svelte 5 Runes

Interactive Demo

$state(count) 0

$derived(count × 2) 0

$derived(doubled × 2) 0

Code

let count = $state(0);
let doubled = $derived(count * 2);
let quadrupled = $derived(doubled * 2);

Button Components

Variants

Sizes

Color Palette

Primary

#06b6d4

Accent

#0ea5e9

Success

#10b981

Warning

#f59e0b

Destructive

#f43f5e

Muted

#1e293b

Background

#0c1222

Foreground

#e2e8f0

Typography

Display Heading

font-display text-5xl font-bold

Section Heading

font-display text-3xl font-semibold

Subsection Heading

font-display text-xl font-medium

Body text for paragraphs and general content. The quick brown fox jumps over the lazy dog. This text demonstrates the default body styling with proper line height for readability.

text-base leading-relaxed

Muted text for secondary information, captions, and helper text.

text-sm text-muted-foreground

const greeting = "Hello, World!";

font-mono text-sm

PocketBase Integration

Client-side Usage

import { getPocketBase } from '$lib/pocketbase/client';

const pb = getPocketBase();

// Authenticate
await pb.collection('users')
  .authWithPassword(email, password);

// Query data
const records = await pb
  .collection('posts')
  .getFullList();

Server-side Usage

export const load = async ({ locals }) => {
  // locals.pb is request-specific
  // locals.user is authenticated user

  if (!locals.user) {
    redirect(303, '/login');
  }

  const posts = await locals.pb
    .collection('posts')
    .getFullList();

  return { posts };
}

Deployment

Type Check

Automatic TypeScript validation

Build

Optimized production build

Deploy

Auto-deploy via Gitea Actions

Push to develop for dev deployment, main for production.