svelte-template Svelte Themes

Svelte Template

Modern SvelteKit template with TypeScript, TailwindCSS, shadcn-svelte, PostgreSQL + type-safe Kysely queries.

Svelte Template

A modern, full-stack Svelte template with TypeScript, TailwindCSS, and PostgreSQL integration.

Features

Getting Started

Prerequisites

  • Node.js (Latest LTS version recommended)
  • pnpm
  • Docker and Docker Compose (for PostgreSQL)

Installation

  1. Clone the repository
  2. Install dependencies:
    pnpm install
    
  3. Copy the environment file:
    cp .env.example .env
    
  4. Start the database:
    docker compose up -d
    
  5. Run database migrations:
    pnpm db:latest
    
  6. Start the development server:
    pnpm dev
    

Database Management

  • Create a new migration: pnpm db:make
  • Apply all migrations: pnpm db:latest
  • Apply next migration: pnpm db:up
  • Revert last migration: pnpm db:down
  • List migrations: pnpm db:list
  • Run database seeds: pnpm db:seed

Available Scripts

  • pnpm dev - Start development server
  • pnpm build - Build for production
  • pnpm preview - Preview production build
  • pnpm check - Type-check the codebase
  • pnpm format - Format code with Prettier
  • pnpm lint - Lint code with ESLint
  • pnpm test - Run tests
  • pnpm test:unit - Run unit tests in watch mode

Project Structure

├── src/
│   ├── lib/         # Shared components and utilities
│   ├── routes/      # SvelteKit routes
│   ├── app.html     # HTML template
│   └── app.css      # Global styles
├── static/          # Static assets
├── migrations/      # Database migrations
└── docker-compose.yml   # Docker configuration

Development

This template uses:

  • Bits UI for accessible component primitives
  • TailwindCSS with tailwind-merge and tailwind-variants for styling
  • Kysely for type-safe database queries
  • Unplugin Icons for automatic icon components
  • ESLint and Prettier for code formatting
  • Cloudflare adapter for deployment

License

MIT

Top categories

Loading Svelte Themes