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 and shadcn registry installs.

# Example: add Aurora via shadcn
npx shadcn@latest add https://sveltebits.xyz/r/aurora.json

Each component page includes its dependencies, usage snippet, props, and full source. See the installation guide for details.

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:

Setting	Value
Build command	npm run build
Build output directory	.svelte-kit/cloudflare
Node.js version	20 or newer

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