Svelte Bits
专为 Svelte 5 与 SvelteKit 打造的开源动态 UI 组件库，收录 60+ 款交互式背景、文字动效与弹性卡片组件。
项目概述
Svelte Bits 是专为 Svelte 5 与 SvelteKit 生态打造的开源动态 UI 组件与背景动效精选库。源自广受好评的 React Bits 项目理念，Svelte Bits 为 Svelte 开发者提供了大量开箱即用的粒子背景、动态文字排版、磁贴按钮与 3D 悬停卡片，支持完全免安装的纯源码复用 (Copy & Paste)。
核心特性
- ✨ 60+ 款精美动态组件：涵盖流光渐变背景、磁力吸附交互 (Magnet)、逐字跳跃动效与发光卡片。
- 🚀 Svelte 5 Runes 原生驱动：基于 Svelte 5 全新响应式状态（
$state、$props）编写，运行效率极致轻快。 - 📋 纯源码即粘即用：无需引入复杂的黑盒 npm 依赖包，直接将单文件
.svelte组件复制进项目即可自由调整。 - 🎨 Tailwind CSS 深度适配：组件样式完全由标准 Tailwind 工具类和 CSS 变量组织，方便快速统一设计语言。
快速上手与示例代码
# 基础依赖配置
npm install tailwindcss gsap clsx tailwind-merge<script lang="ts">
// Svelte 5 典型组件示例：磁吸悬停按钮 (Magnet Button)
let { children, class: className = '' } = $props();
let element: HTMLElement;
function handleMouseMove(e: MouseEvent) {
const { left, top, width, height } = element.getBoundingClientRect();
const x = (e.clientX - (left + width / 2)) * 0.3;
const y = (e.clientY - (top + height / 2)) * 0.3;
element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
}
function handleMouseLeave() {
element.style.transform = 'translate3d(0px, 0px, 0)';
}
</script>
<button
bind:this={element}
onmousemove={handleMouseMove}
onmouseleave={handleMouseLeave}
class="transition-transform duration-200 ease-out px-6 py-3 rounded-xl bg-indigo-600 text-white font-medium {className}"
>
{@render children?.()}
</button>技术选型建议与适用场景
- Svelte / SvelteKit 营销官网与落地页：为首屏、CTA 按钮与背景区域注入高质感动态细节，大幅提升界面吸引力。
- 轻量级全栈应用：在享受 Svelte 极致轻巧打包体积的同时，无需妥协前端微交互与动效表现力。
讨论与评价
分享你对该组件库的上手体验、优缺点或建议...
暂无讨论。欢迎分享你对该组件库的上手体验、优缺点或建议！
相关组件推荐
基于同类与技术栈推荐
23rd
192
由 radiumcoders 打造的开源 shadcn/ui 组件注册表，提供 WebGL 着色器、趣味 404 与交互式展示组件，Copy-Paste 装进仓库即装即改。
动效动画源码拷贝React+2
动效动画详情
nxui (Vue)
215
专为 Vue 3 与 Nuxt 4 打造的高颜值动效组件库，收录 230+ 款组件，基于 Tailwind CSS v4 与 motion-v 构建，支持 shadcn 源码复用模式。
动效动画源码拷贝Tailwind 生态+2
动效动画详情
Great UI
273
基于 Tailwind CSS v4、Motion 与 TypeScript 构建的高交互开源 React 组件库，主打创意转场、微动效与源码免依赖复制。
动效动画源码拷贝React+2
动效动画详情