Svelte Bits

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



Documentation · Quick Start · React Bits

Why Svelte 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

Features

• 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

Installation

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.

Local Development

npm install
npm run dev

Build the registry and production site:

npm run build

Run Svelte diagnostics:

npm run check

Cloudflare Deployment

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:

Contributing

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.

Maintainer

David Haz — creator & lead maintainer

Credit

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.

License

MIT + Commons Clause