Oliver's SvelteKit + TypeScript + TailwindCSS 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 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.
CSS frameworks
- Tailwind CSS: Rapidly build modern websites without ever leaving your HTML.
- 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.
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.
Credits
svelte-themes port of next-theme for SvelteKit by beynar/svelte-themes.
