Svelte Bits ports React Bits

Frontend component libraries usually split into two camps. One camp gives you serious app primitives — buttons, dialogs, menus, forms. The other gives you the fun stuff — animated hero sections, shader backgrounds, text effects, and demo-ready UI that makes a portfolio feel alive. Svelte has had plenty of the first kind. David Haz is trying to give it more of the second. His new project, Svelte Bits, ports the visual language and component catalog of React Bits into Svelte, with the pitch that Svelte developers should be able to grab the same kinds of eye-catching components without rewriting them from scratch. (github.com) ### What is Svelte Bits, exactly? Svelte Bits is an open-source collection of animated, interactive, customizable Svelte components. The repo describes it as a creative library for “text, backgrounds, and UI,” and the live site frames it as copy-paste components you can drop straight into a project. That matters because this is not a design system in the usual se(github.com) after you paste them in. (github.com) ### Why does the React Bits connection matter? Because this is not just “inspired by” React Bits in the loose marketing sense. The GitHub README says Svelte Bits is being built incrementally from React Bits and that ports should preserve the upstream implementation as closely as possible — dependencies, shaders, spring configs, props, and behavior. Basically, Haz(github.com)the actual feel of the original library. (github.com) ### What does React Bits already represent? React Bits is already established as a library of animated, interactive, fully customizable React components for “memorable” interfaces. That phrasing is a clue. This is not about enterprise CRUD screens. It is about landing pages, portfolios, product showcases, and the kind of frontend work where motion and visual pers(github.com)nto that niche for Svelte developers. (reactbits.dev) ### How do you actually use it? The repo says there are two main paths. You can manually copy and paste standalone `.svelte` files, or you can pull components in through a shadcn-style registry. Haz even gives a concrete install example for an Aurora component using a registry URL. Each component page is meant to include dependencies, usage, props, and source, which tells you the proj(reactbits.dev)straction. You are supposed to take the code and make it yours. (github.com) ### Is the site settled yet? Not completely. There is a small wrinkle here. The GitHub repo points to `sveltebits.xyz` for registry installs, but the currently indexed live site showing the component showcase is `sveltebits.dev`. The `.dev` site also presents a simpler message — “No runtime dependencies. Just Svelte + Tailwind” — than the repo, which says ports k(github.com)ct is still moving fast, and the docs and hosting setup may still be converging. (github.com) ### Why is this useful for Svelte developers? Because Svelte’s ecosystem has strong headless and practical UI options, but fewer well-known libraries built around dramatic motion and showcase components. If you want accessible building blocks, projects like Bits UI already cover that ground. Svelte Bits attacks a different problem — how to make a site look impres(github.com). (github.com) ### Why does David Haz fit this project? Haz’s own portfolio leans hard into creative frontend work — web development, interface design, 3D web experiences, creative coding. So this release looks less like a random framework port and more like an extension of the kind of work he already does. The project also names him directly as creator and lead maintainer, whi(github.com) (davidhaz.com) ### Bottom line? Svelte Bits is a small but meaningful ecosystem move. It gives Svelte a more direct answer to the “how do I make this look cool fast?” question — and that is a gap React Bits had already figured out for React. (github.com)