Introduction

FancyUI is a collection of 146 animated, interactive UI components built natively for Svelte 5.

⚡Svelte 5 Native ✦Animation-first ⧉Copy-paste friendly 〜Tailwind CSS 4 TSTypeScript

Philosophy

⚡Svelte 5 native

Built with runes. No legacy APIs.

✦Animation-first

Every component ships with polished animations out of the box.

⧉Copy-paste friendly

Use as a package or copy the source directly.

〜Tailwind CSS 4

Styled with utility classes and CSS custom properties.

TSTypeScript

Full type safety with exported prop interfaces.

Quick Start

1
Install

Add FancyUI to your project.

pnpm add fancy-ui-svelte
2
Import

Import the components you need.

ts 
import { BorderBeam, Sparkles } from 'fancy-ui-svelte';
3
Use

Drop it in your Svelte components.

svelte 
<div class="relative overflow-hidden rounded-xl border p-6">
	<p>Your content here</p>
	<BorderBeam />
</div>

What's Included

146 components across 10 categories:

Buttons
Cards
Text
Backgrounds
Effects
Layout
Navigation
Data Display
Feedback
Media

Next Steps

✦
New to FancyUI?
Check out the Theme Generator to customize colors and see components react in real time.
Try Theme Generator