A creative library of animated Svelte components.
_{Stand out with free, customizable animations for text, backgrounds, and UI.}



Documentation · Quick Start · React Bits

Svelte Bits helps you ship stunning Svelte interfaces faster. Instead of spending hours crafting animations from scratch, grab a polished component and customize it to fit your project.

Text Animations · Animations · Components · Backgrounds

• React Bits parity — a Svelte port of the React Bits landing page, docs, and component collection
• Copy-paste components — every component is a standalone .svelte file
• TypeScript + Tailwind — one focused variant per component, no framework boilerplate
• Real animation stacks — ports keep the original dependencies, shaders, physics, and behavior
• Fully customizable — tweak props or edit the source directly
• Cloudflare-ready docs — the site builds with the SvelteKit Cloudflare adapter

Svelte Bits supports manual copy-paste, jsrepo, or the shadcn CLI with direct HTTPS URLs to each hosted registry item.

jsrepo (configure once, then add components):

pnpm dlx jsrepo init https://sveltebits.xyz/r
pnpm dlx jsrepo add aurora

shadcn (add with the item’s .json URL):

pnpm dlx shadcn@latest add https://sveltebits.xyz/r/aurora.json

Each component page lists dependencies, props, usage, and copy-ready install snippets. See the installation guide for runners (npm/pnpm/Yarn/Bun) and MCP setup if you browse registries with the shadcn MCP server.

npm install
npm run dev

Build the registry and production site:

npm run build

Run Svelte diagnostics:

npm run check

This repo uses @sveltejs/adapter-cloudflare in svelte.config.js and a Worker-style wrangler.jsonc.

Build locally with:

npm run build

Deploy with Wrangler:

npx wrangler deploy

The Cloudflare output is emitted to .svelte-kit/cloudflare, with the Worker entry at .svelte-kit/cloudflare/_worker.js and static assets served from the same directory via the ASSETS binding.

If deploying through the Cloudflare dashboard, use:

Svelte Bits is being built incrementally from React Bits. Component ports must preserve the upstream implementation as closely as possible, including dependencies, shaders, spring configs, props, and behavior.

David Haz — creator & lead maintainer

Svelte Bits is an official Svelte port inspired by React Bits. React Bits occasionally draws inspiration from publicly available code examples, rewritten as full-fledged customizable components.

MIT + Commons Clause