Getting Started
Components
- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Arc Timeline
- Aurora Text
- Backlight New
- Avatar Circles
- Bento Grid
- Blur Fade
- Border Beam
- Cool Mode
- Dia Text Reveal New
- Dither Shader New
- Dock
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text
- Icon Cloud
- Interactive Hover Button
- Lens
- Light Rays
- Line Shadow Text
- Magic Card
- Marquee
- Meteors
- Morphing Text New
- Motion Grid Beta
- Neon Gradient Card
- Number Ticker
- Orbiting Circles
- Pixel Image New
- Pointer
- Progressive Blur
- Pulsating Button
- Rainbow Button
- Retro Grid
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border
- Smooth Cursor
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
Svelte Magic UI is a collection of animation components built with Svelte, Tailwind CSS and Motion SV.
Features
- 50+ components ready to use in your projects
- Open source and free forever
- Easily customizable to match your design system
- Install components via Shadcn Svelte CLI - Quick integration with your project
- All components include Copy markdown, open in AI tools support
- TypeScript support - Fully typed components
Credits
Inspired from Magic UI by Dillon Verma.
This project adapts the original ideas for the Svelte ecosystem while keeping the source credit visible in the docs.
Sponsor
If you find this project helpful, please consider supporting the project:
- Sponsor Svelte Animations on GitHub
- Sponsor Motion SV on GitHub - Motion SV is built by @hanielu and powers all the animations in this project
- Share it on Twitter