Getting Started
Components
- Animated Beam
- Animated Circular Progress Bar
- Animated Gradient Text
- Animated Grid Pattern
- Animated List
- Animated Shiny Text
- Animated Theme Toggler
- Aurora Text
- Avatar Circles
- Bento Grid New
- Blur Fade
- Border Beam
- Cool Mode
- Dither Shader New
- Dock New
- Dot Pattern
- Dotted Map New
- File Tree
- Flickering Grid
- Grid Pattern
- Hero Video Dialog
- Hyper Text New
- Icon Cloud New
- Interactive Hover Button
- Lens New
- Light Rays New
- Line Shadow Text New
- Magic Card New
- Marquee
- Meteors New
- Morphing Text New
- Motion Grid New
- Neon Gradient Card New
- Number Ticker
- Orbiting Circles New
- Pixel Image New
- Pointer New
- Progressive Blur New
- Pulsating Button
- Rainbow Button
- Retro Grid New
- Ripple
- Ripple Button
- Scroll Progress
- Shimmer Button
- Shine Border New
- Smooth Cursor New
- Striped Pattern New
- Text Animate
- Typing Animation
- Video Text
- Warp Background
- Word Rotate Beta
Introduction
Create magical landing pages with components that you can copy and paste into your apps.
Svelte Magic UI is a collection of re-usable 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
Early Access
Svelte Magic UI is currently in early development.
We're building this library in the open and actively working on new components and features.
We're building this library in the open and actively working on new components and features.
Support Our Work
If you find this library 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 library
- Share it on Twitter