Beautiful animation and UI components for Svelte 5.
- Svelte 5 Runes — Built with
$state,$derived,$effect, and$props - Tailwind CSS 4 — Utility-first styling with theme tokens
- TypeScript — Fully typed props and events
- 145 Components — Core primitives (forms, navigation, overlays) alongside buttons, text animations, backgrounds, effects and a micro-interactions collection
- Dark Mode — All components support light and dark themes
- Opt-in Sound — Eleven synthesised interface cues, a
SoundToggleswitch and asoundFeedbackaction; silent until the user turns it on - Tested — 3,700+ unit tests with Vitest and Testing Library
Install via npm:
npm install fancy-ui-svelteThen import any component:
import { Marquee, BorderBeam, Confetti } from "fancy-ui-svelte";Add the Tailwind integration to your app's CSS (e.g. src/app.css):
@import "tailwindcss";
@import "fancy-ui-svelte/tailwind.css";This single import tells Tailwind v4 to scan the library's components so all utility classes are generated automatically. No manual @source path needed.
Alternative: manual @source (without the CSS import)
@import "tailwindcss";
@source "../node_modules/fancy-ui-svelte/dist";The path is relative to your CSS file location.
Or browse and copy a component:
- Find the component you need in the live demo
- Copy the source from
src/lib/fancy-ui/[component-name]/ - Paste into your project
Or clone the full demo locally:
git clone https://github.com/RamaHerbin/fancy-ui.git
cd fancy-ui
pnpm install
pnpm devThe docs site serves LLM-friendly documentation following the llms.txt convention:
- fancy-ui.rama.app/llms.txt — setup guide, usage rules, and component index
- fancy-ui.rama.app/llms-full.txt — full reference with every component's props
To make your coding agent use fancy-ui correctly, add this to your project's CLAUDE.md, AGENTS.md, or .cursorrules:
## UI components
Use fancy-ui-svelte (Svelte 5 + Tailwind CSS v4) for animated UI components.
Full component and props reference: https://fancy-ui.rama.app/llms-full.txt
Key rules: overlay/effect components (BorderBeam, GlowBorder, backgrounds, ...)
need a parent with `relative overflow-hidden`; cursor effects (FluidCursor,
SmoothCursor) mount once in the root +layout.svelte; Svelte 5 syntax only.pnpm dev # Start dev server
pnpm check # Run Svelte type checker
pnpm check:registry # Verify component registry parity (CI gate)
pnpm check:i18n # Verify i18n message catalog parity (CI gate)
pnpm test # Run tests
pnpm test:watch # Run tests in watch mode
pnpm build # Production build
pnpm storybook # Component workshop on :6006Component stories live in src/stories/ — see the Storybook section in CONTRIBUTING.md.
src/
├── lib/
│ ├── fancy-ui/ # UI components (one folder per component)
│ │ ├── rainbow-button/
│ │ │ ├── RainbowButton.svelte
│ │ │ ├── RainbowButton.test.ts
│ │ │ ├── index.ts
│ │ │ └── README.md
│ │ ├── registry.ts # Component registry & metadata
│ │ └── index.ts # Barrel exports
│ └── components/ui/ # shadcn-svelte primitives
└── routes/
├── +page.svelte # Home page
└── docs/ # Docs site (registry-driven component pages)
└── components/[slug]/+page.svelte
tests/
└── e2e/ # Playwright end-to-end tests
Component tests are colocated with their component (see RainbowButton.test.ts above); there is no separate top-level unit-test directory.
Contributions are welcome! 145 components and counting — PRs for new components, bug fixes, and improvements are appreciated.
- Create the component folder under
src/lib/fancy-ui/ - Implement the component in idiomatic Svelte 5
- Add a docs example under
src/lib/components/docs/examples/<slug>/(BasicUsage.svelte) - Register it in
src/lib/fancy-ui/registry.ts - Export it from
src/lib/fancy-ui/index.ts
| Technology | Version | Purpose |
|---|---|---|
| Svelte | 5 | UI framework |
| SvelteKit | 2 | App framework |
| Tailwind CSS | 4 | Styling |
| TypeScript | 5 | Type safety |
| Vitest | 4 | Testing |
| bits-ui | 2 | Headless primitives |
| GSAP | 3 | Advanced animations |
Inspired by Inspira UI, Aceternity UI and Magic UI.
MIT