Svelte 5 Component Templates

Modern interactions. Smooth animations. Clean design. A growing collection of production-ready Svelte 5 components, inspired by Magic UI, Aceternity, and Sikandar S. Bhide's animation-svelte.

Rebuilt with runes, thoroughly documented, made accessible, with some original creations mixed in. Copy, customise, and use in your projects.

Built by @Jktfe with patient support from Claude. Feel free to use, adapt, and let me know where you use it!

Component Categories

31 components organised into 11 categories. Hover to preview, click to select, then follow the link to see the demo.

☰ Navigation 2

Navbar - Image 1
Navbar
SpeedDial - Image 2
SpeedDial

πŸ’« Native UI 3

ShineBorder - Image 1
ShineBorder
SwishButton - Image 2
SwishButton
MagicCard - Image 3
MagicCard

🎭 Helpful UX 3

Marquee - Image 1
Marquee
LinkImageHover - Image 2
LinkImageHover
AnimatedBeam - Image 3
AnimatedBeam

⏱️ Time 2

Countdown - Image 1
Countdown
Timeline - Image 2
Timeline

πŸƒ Cards 3

ScratchToReveal - Image 1
ScratchToReveal
ExpandingCard - Image 2
ExpandingCard
CardStack - Image 3
CardStack

πŸ“Š Data Visualisation 5

DataGrid - Image 1
DataGrid
CalendarHeatmap - Image 2
CalendarHeatmap
BubblePacking - Image 3
BubblePacking
RadialCluster - Image 4
RadialCluster
Sunburst - Image 5
Sunburst

🌊 Interactive 3

Sankey - Image 1
Sankey
FolderFiles - Image 2
FolderFiles
ExplainerCanvas - Image 3
ExplainerCanvas

πŸ–ΌοΈ Media & Images 2

BeforeAfter - Image 1
BeforeAfter
DomeGallery - Image 2
DomeGallery

πŸ“ Forms & CRUD 2

Forms - Image 1
Forms
Editor - Image 2
Editor

πŸ—ΊοΈ Location Ops 3

Maps - Image 1
Maps
Location - Image 2
Location
GeoViz - Image 3
GeoViz

πŸ” Authentication 3

Auth Demo - Image 1
Auth Demo
Dashboard - Image 2
Dashboard
Profile - Image 3
Profile

Quick Start

1

Browse Components

Explore the categories above to find the components you need.

2

Copy to Your Project

Copy component files from src/lib/components/ to your project.

3

Customise & Use

Import and use with your data. All props are fully typed and documented.

⚑ Svelte 5 Runes
πŸ“± Fully Responsive
β™Ώ Accessible
πŸš€ Zero Deps Options
πŸ“ TypeScript
🎨 Modern Design