🔓 Auth Offline
TFE — Svelte 5 Templates v2.0 · 108 components · 12 categories Updated · MAY 2026

A Working
Library of
Svelte Parts.

I’m @Jktfe. I build interface parts in Svelte 5 — runes, accessibility wired in, animation that doesn’t bounce. 108 of them, so far. Inspired by Magic UI, Aceternity and Sikandar S. Bhide; rebuilt properly, then mixed with originals. Copy what you need.

Browse 108 components GSAP suite GitHub
— Section · 02.00

The catalogue.
Twelve shelves.

108 components on file
01

Navigation & Shell

Application chrome, orientation, page position, and primary movement.

09 in this shelf
01 / 09
001

Navbar

Responsive app navigation with a sliding panel.

/navbar View
002

SpeedDial

Floating action trigger with radial shortcuts.

/speeddial View
003

FloatingDock

Dock-style navigation with proximity magnification.

/floatingdock View
004

LiquidTabBar

Gooey active-tab motion for compact navigation.

/liquidtabbar View
005

Drawer

Slide-in modal panel from any edge.

/drawer View
006

Breadcrumbs

Hierarchical path navigation with smart truncation.

/breadcrumbs View
007

Pagination

Page-number navigation with ellipsis handling.

/pagination View
008

ReadingTOC

Auto-tracking document table of contents.

/readingtoc View
009

ScrollProgressBar

Viewport reading-progress indicator.

/scrollprogressbar View
02

Controls & Input

Form fields, selectors, menus, and compact interaction controls.

17 in this shelf
01 / 17
010

Forms

Reusable Svelte form field suite.

/forms View
011

PinInput

Segmented OTP and verification-code entry.

/pininput View
012

UploadDropzone

Drag, paste, and validate file uploads.

/uploaddropzone View
013

Switch

Accessible boolean toggle with three sizes.

/switch View
014

Slider

Styled range input with value formatting.

/slider View
015

SegmentedControl

Joined picker for mutually exclusive options.

/segmentedcontrol View
016

FilterChips

Toggleable chips for search and filtering.

/filterchips View
017

RatingStars

Keyboard-friendly star rating control.

/ratingstars View
018

Stepper

Multi-step progress and completion control.

/stepper View
019

Accordion

Collapsible content sections with smooth motion.

/accordion View
020

Tabs

ARIA-correct tabbed content switcher.

/tabs View
021

CommandPalette

Spotlight-style fuzzy command launcher.

/commandpalette View
022

ContextMenu

Right-click and keyboard context menu.

/contextmenu View
023

HoldToConfirm

Press-and-hold confirmation for risky actions.

/holdtoconfirm View
024

CopyButton

Clipboard button with copied-state feedback.

/copybutton View
025

KbdShortcut

Platform-aware keyboard shortcut display.

/kbdshortcut View
026

Tooltip

Accessible hover and focus tooltip.

/tooltip View
03

Feedback & Identity

Status, loading, profile, and empty-state primitives.

11 in this shelf
01 / 11
027

ToastNotification

Stackable global alerts with actions.

/toastnotification View
028

AlertBanner

Inline status banner for common tones.

/alertbanner View
029

EmptyState

Reusable nothing-here-yet placeholder.

/emptystate View
030

SkeletonLoader

Placeholder primitives for loading content.

/skeletonloader View
031

ProgressRing

Circular determinate and indeterminate progress.

/progressring View
032

ProgressBar

Linear progress indicator with labels and variants.

/progressbar View
033

Spinner

Indeterminate loading indicator in multiple styles.

/spinner View
034

BadgePill

Status pills, tags, and dismissible chips.

/badgepill View
035

Avatar

User image with initials and status fallback.

/avatar View
036

AvatarStack

Overlapping avatars with overflow handling.

/avatarstack View
037

StatCard

KPI card with trend-aware sentiment.

/statcard View
04

Text, Time & Content Motion

Animated copy, counters, time displays, and content rhythm.

13 in this shelf
01 / 13
038

Typewriter

Cycling typewriter text with a cursor.

/typewriter View
039

ShinyText

Configurable shimmer sweep for text.

/shinytext View
040

ScrambledText

Glyph shuffle that resolves into readable copy.

/scrambledtext View
041

TrueFocus

Word-by-word phrase focus with a moving frame.

/truefocus View
042

VariableProximity

Cursor-reactive variable-font typography.

/variableproximity View
043

GlitchText

RGB channel split and clip-band text glitch.

/glitchtext View
044

SplitFlap

Mechanical board character flip animation.

/splitflap View
045

TickerTape

Structured infinite-scroll information strip.

/tickertape View
046

Marquee

Infinite scrolling content rail with pause-on-hover.

/marquee View
047

CodeBlock

Token-coloured code display with copy support.

/codeblock View
048

Countdown

Animated timer for deadlines and launches.

/countdown View
049

CountUp

Locale-aware number animation primitive.

/countup View
050

Timeline

Animated timeline for milestones and events.

/timeline View
05

Cards & Layout

Composed surfaces, showcases, and reusable content layouts.

11 in this shelf
01 / 11
051

CardStack

Interactive horizontal card stack.

/cardstack View
052

CardStackMotionFlip

4-direction rolling deck with scoped keyboard control.

/cardstackmotionflip View
053

BentoGrid

Responsive grid system for modern layouts.

/bentogrid View
054

Divider

Section separator with optional label and orientation.

/divider View
055

ExpandingCard

Card that smoothly expands into detail.

/expandingcard View
056

ScratchToReveal

Canvas scratch-off reveal interaction.

/scratchtoreveal View
057

StreamShowcase

Editorial carousel for streaming-style shelves.

/streamshowcase View
058

Cardwall

Perspective billboard wall with drifting cards.

/cardwall View
059

InteractiveCards

Scroll-driven paintings portfolio with fan, conveyor, and detail-view phases.

/interactivecards View
060

MagicCard

Card spotlight driven by pointer position.

/magiccard View
061

MorphingDialog

Shared-element transition dialog.

/morphingdialog View
06

Motion Primitives

Composable motion wrappers and pointer-driven effects.

16 in this shelf
01 / 16
062

ShineBorder

Animated border with sweeping shine.

/shineborder View
063

SwishButton

Button text slide and accent motion.

/swishbutton View
064

MagneticButton

Button that drifts toward the cursor.

/magneticbutton View
065

ClickSpark

Click-triggered particle burst wrapper.

/clickspark View
066

LinkImageHover

Links with floating image preview on hover.

/linkimagehover View
067

AnimatedBeam

SVG beams for connected-flow diagrams.

/animatedbeam View
068

ScrollReveal

Viewport-entry stagger reveal primitive.

/scrollreveal View
069

OrbitalRing

Circular orbital layout with auto-rotation.

/orbitalring View
070

MagnetGrid

Grid cells displaced by cursor proximity.

/magnetgrid View
071

PixelTrail

Cursor-tracked decaying pixel trail.

/pixeltrail View
072

RippleGrid

Event-driven ripple waves across a grid.

/ripplegrid View
073

GSAP Suite

Reusable GSAP primitives for Svelte sequencing, text, canvas, deck, and grid motion.

/gsap-suite View
074

EqualizerBars

CSS equalizer indicator with phased bars.

/equalizerbars View
075

ConfettiBurst

Imperative canvas celebration burst.

/confettiburst View
076

Tilt3D

Cursor-driven 3D rotation wrapper.

/tilt3d View
077

Pendulum

Damped swing wrapper with imperative control.

/pendulum View
07

Ambient Surfaces

Full-bleed backgrounds, display shells, and atmospheric visual systems.

10 in this shelf
01 / 10
078

AuroraBackdrop

Layered pure-CSS aurora surface.

/aurora-backdrop View
079

MeshGradient

Animated mesh-gradient backdrop.

/meshgradient View
080

MembraneHero

Fluid-mesh editorial hero surface.

/membrane-hero View
081

PerspectiveGrid

CSS 3D perspective grid backdrop.

/perspectivegrid View
082

NoiseField

Ambient grain, film-noise, and TV-static overlay.

/noisefield View
083

NeonSign

Glowing neon-tube text treatment.

/neonsign View
084

CRTScreen

Retro screen frame with scanlines and roll.

/crtscreen View
085

HoloCard

Holographic foil shimmer wrapper.

/holocard View
086

ElectricBorder

SVG-filter electric border effect.

/electricborder View
087

TopologyColorGrid

Three.js and GSAP colour topology scene with hover extrusion.

/topologycolorgrid View
08

Data & Visualisation

Tables, charts, hierarchy, graph, and relationship visualisations.

09 in this shelf
01 / 09
088

DataGrid

Two grid implementations for tabular data.

/datagrid View
089

CalendarHeatmap

GitHub-style contribution calendar.

/calendarheatmap View
090

Gantt

Native SVG Gantt with deps, milestones, today, weekends, % complete.

/gantt View
091

BubblePacking

Force-directed circle packing view.

/bubblepacking View
092

RadialCluster

Hierarchical radial dendrogram.

/radialcluster View
093

Sunburst

Zoomable hierarchical chart.

/sunburst View
094

WordCloud

Frequency-weighted text cloud.

/wordcloud View
095

Sankey

Expandable flow visualisation.

/sankey View
096

ExplainerCanvas

Connected concept-mapping canvas.

/explainercanvas View
09

Media & Portfolio

Image comparison, galleries, and portfolio-grade presentation.

03 in this shelf
01 / 03
097

BeforeAfter

Draggable before/after image comparison.

/beforeafter View
098

DomeGallery

3D spherical image gallery.

/domegallery View
099

PortfolioPhotographer

Editorial photo-portfolio hero.

/portfolio-photographer View
10

Data-Backed Workflows

Examples that benefit from real persistence and public demo data.

02 in this shelf
01 / 02
100

Editor

CRUD editor backed by database data when configured.

/editor View
101

FolderFiles

3D filing cabinet with database-ready folders and files.

/folderfiles View
11

Maps & Location

Geographic interfaces, routing demos, and location-aware visualisations.

04 in this shelf
01 / 04
102

Maps

Interactive Leaflet maps with markers and search.

/maps View
103

Location

Locate-me, delivery, and routing demos.

/location View
104

GlobePresence

High-performance 3D globe visualisation.

/globepresence View
105

GeoViz

Choropleth and spike-map visualisations.

/geo View
12

Auth & OSS Demo

Better Auth flows and protected-route examples for public demos.

03 in this shelf
01 / 03
106

Auth Demo

Better Auth sign-in, sign-up, and demo-account entry.

/auth View
107

Dashboard

Protected route example with session data.

/dashboard View
108

Profile

Protected user profile view.

/profile View

Copy, customise,
ship.

Three steps. No package install, no opaque API. The components are plain Svelte 5 files. Lift and adapt.

01

Browse the shelf

Find the component you want. Hit the demo, prod the controls, read the source.

/components → /demo
02

Copy the file

Grab the .svelte file from src/lib/components/. Drop it into your project. Props are typed.

cp Component.svelte ./src/lib
03

Bend it to fit

Wire your data, swap colours, tune the motion. If something’s missing, tell me — I’ll add it.

<Component data={...} />
— Suite · 06.13

GSAP, sequenced.
For copy-and-ship agents.

SplitText heroes, reveal wrappers, a kinetic canvas field, fan decks, and a Flip grid — grouped on one route, with provenance chips and copy-for-your-agent prompts.

  • 01SplitText hero with stagger and word focus
  • 02Reveal wrapper for any block, viewport-driven
  • 03Kinetic canvas field, pointer-reactive
  • 04Fan deck and Flip grid, scoped keyboard control
Open /gsap-suite