HRM

Svelte 5 + shadcn-svelte + PocketBase, using Bun.

Stack

• Svelte 5 (SvelteKit) with TypeScript
• Tailwind CSS v4 via @tailwindcss/vite
• shadcn-svelte (new-york style, slate base)
• PocketBase — client and server connector for https://pocketbase.ccllc.pro

Develop

bun install
bun run dev

Open http://localhost:5173. Use bun run dev -- --open to open automatically.

Build

bun run build
bun run preview   # preview production build

PocketBase

• Client: use the shared client in $lib/pocketbase (e.g. import { pb } from '$lib/pocketbase') for browser-side API calls and auth.
• Server: use event.locals.pb in load functions, form actions, and API routes. Auth is restored from the pb_auth cookie and refreshed in src/hooks.server.ts.

To change the PocketBase URL or auth collection, edit:

• src/lib/pocketbase.ts — client base URL
• src/hooks.server.ts — server base URL and users auth collection name if different

shadcn-svelte

Add components with:

bunx shadcn-svelte@latest add <component>

Example: bunx shadcn-svelte@latest add card input label

Config: components.json. Global styles and theme: src/routes/app.css.

Project layout

• src/lib/components/ui/ — shadcn-svelte components
• src/lib/pocketbase.ts — PocketBase client (browser)
• src/lib/utils.ts — cn() and shared types
• src/hooks.server.ts — PocketBase per-request instance and cookie auth