Svelte Kit + TypeScript + Tailwind CSS starter template

Everything you need to build a full-featured Svelte project, powered by create-svelte.

What's inside

This starter template comes with:

Bundler

• Vite: Next Generation Frontend Tooling.

JavaScript frameworks

• Svelte: Cybernetically enhanced web apps.
• Svelte Kit: Web development, streamlined.

Components

• svelte-headlessui: Unstyled, fully accessible UI components for Svelte.
• svelte-transition: Svelte Transition Component.
• svelte-french-toast: Buttery smooth toast notifications.
• svelte-themes: Perfect SvelteKit dark mode in 2 lines of code. Support System preference and any other theme with no flashing.
• @poppanator/sveltekit-svg: SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls.

Type checking

• TypeScript: JavaScript with syntax for types.

Data validation

• zod: TypeScript-first schema validation with static type inference.
• zod-form-data: Validation helpers for zod specifically for parsing FormData or URLSearchParams.

CSS frameworks

• Tailwind CSS: Rapidly build modern websites without ever leaving your HTML.
• @tailwindcss/forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
• Sensible defaults in the tailwind.config.js.

Formatting & Linting

• Prettier: An opinionated code formatter.
• prettier-plugin-tailwindcss: Prettier plugin for Tailwind CSS that automatically sorts classes based on the official recommended class order.
• Eslint: Find and fix problems in your JavaScript code.

i18n

• typesafe-i18n: A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

Testing

• Playwright: Fast and reliable end-to-end testing for modern web apps.
• Vitest: Blazing Fast Unit Test Framework.

Fonts

• Inter variable: A typeface carefully crafted & designed for computer screens.
• Optimizations to minimize layout shifts.

Utils

• svelte-local-storage-store: A Svelte store that persists to localeStorage.
• date-fns: Modern JavaScript date utility library.
• date-fns-tz: Complementary library for date-fns v2 adding IANA time zone support.
• @neoconfetti/svelte: Confetti in Svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Credits

Best practices for font optimization by Lee Robinson's Web Fonts in 2021 blog post.

i18n logic copied from typesafe-i18n-demo-sveltekit.

svelte-themes port of next-theme for SvelteKit by beynar/svelte-themes.