Repo of the Day
stolinski/drop-in
Published: Dec 19, 2024
Open repository ↗A platform for building apps rapidly with Svelte 5, Svelte Kit and if you'd like Pocketbase or Zero. Includes a modern bespoke component template library and a next level CSS. Use as a starter kit or take just what you need, components and CSS.
Summary
Drop In is a starter kit and component library for building SvelteKit applications quickly, with an emphasis on local-first apps that sync to a backend using Zero. It ships TypeScript by default, a base CSS package called @drop-in/graffiti, UI elements under @drop-in/decks and @drop-in/ramps, and pre-wired integrations for auth and email. The README explicitly flags the project as a work in progress, with the current usable template named "Lofi."
What it is useful for
Drop In is useful when an engineer wants to skip the boilerplate wiring of a new Svelte 5 / SvelteKit project and get a working structure for things that are tedious to set up by hand: project aliases, a Drizzle schema with a Zero Drizzle connection for one-time schema authoring, an auth helper via @drop-in/pass that runs on Node.js or Cloudflare Workers, and a swappable email provider (Resend, SendGrid, MailChannels, or SMTP are listed). It also provides a small, dependency-light component layer (toasts, modals, drawers, popovers) and a CSS package covering typography and a grid system, so individual pieces can be pulled into an existing project without adopting the whole starter. The included path aliases ($lib, $routes, $state, $types, $utils) give a conventional folder layout out of the box.
How engineers can use it
The documented setup flow is:
- Run
npx @drop-in/new your-app-name(orpnpx @drop-in/new your-app-name). cd ./your-app-namepnpm installornpm install- Set the required environment credentials before running the app.
- Optionally run
npm run typegen(orpnpm typegen); the README notes this step requires all env credentials to be set.
There are two documented limitations to plan around. First, the base template splits routes into "SSR with no auth" and "app code with auth," so authenticated SSR is intentionally not included; a separate template for that is mentioned as a possible future addition. Second, no third-party styling library is bundled; the author explains this is to keep the CSS surface minimal, and engineers are expected to add their own if needed. Engineers who want a heavier, opinionated UI should treat the README's note that the primary template will become Zero-based as a heads-up that APIs may shift while the project is still WIP. For exact configuration of env variables, the README does not list them, so readers should consult the generated project's own README after scaffolding.