DavidHDev/svelte-bits

DavidHDev/svelte-bits has 400 GitHub stars and 23 forks. GitHot measured +7 in 7 days. Last checked 2026-11-10 21:14 UTC. Last push 2026-09-21.

How these counts are measured

An open source collection of animated, interactive & fully customizable Svelte components for building memorable websites.

400 stars 23 forks

What you can do

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

Measured star growth

in 24h: Update delayed
in 7 days: +7
in 15 days: Collecting history
in 1 month: Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

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:

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