🔓 Auth Offline
TFE — Svelte 5 Templates v2.0 · 133 components · 13 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. 133 of them, so far. Inspired by Magic UI, Aceternity and Sikandar S. Bhide; rebuilt properly, then mixed with originals. Copy what you need.

Browse 133 components GSAP suite GitHub
— Section · 02.00

The catalogue.
Twelve shelves.

133 components on file
01

Navigation & Shell

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

10 in this shelf
01 / 10
001

Sidebar

Collapsible navigation rail with sections, icons, active state, and a mobile drawer mode.

/sidebar View
002

Navbar

Responsive app navigation with a sliding panel.

/navbar View
003

SpeedDial

Floating action trigger with radial shortcuts.

/speeddial View
004

FloatingDock

Dock-style navigation with proximity magnification.

/floatingdock View
005

LiquidTabBar

Gooey active-tab motion for compact navigation.

/liquidtabbar View
006

Drawer

Slide-in modal panel from any edge.

/drawer View
007

Breadcrumbs

Hierarchical path navigation with smart truncation.

/breadcrumbs View
008

Pagination

Page-number navigation with ellipsis handling.

/pagination View
009

ReadingTOC

Auto-tracking document table of contents.

/readingtoc View
010

ScrollProgressBar

Viewport reading-progress indicator.

/scrollprogressbar View
02

Controls & Input

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

25 in this shelf
01 / 25
011

Combobox

Typeahead select with filtering, keyboard navigation, and an optional multi-select chip mode.

/combobox View
012

DatePicker

Accessible single-date picker with a month grid and full keyboard navigation.

/datepicker View
013

DateRangePicker

Two-month range picker with start/end selection and live hover-range preview.

/daterangepicker View
014

TreeView

Hierarchical tree with expand/collapse, roving-tabindex keyboard navigation, and tri-state checkbox cascade.

/treeview View
015

RichTextEditor

Contenteditable rich-text editor with a formatting toolbar that outputs sanitised HTML.

/richtexteditor View
016

ColorPicker

HSV colour picker with a saturation/value field, hue slider, swatches, and hex input.

/colorpicker View
017

TagInput

Token input — type to add tags, Backspace to remove, with paste-to-split and dedupe.

/taginput View
018

RangeSlider

Dual-thumb range slider with keyboard support and non-crossing thumbs.

/rangeslider View
019

Forms

Reusable Svelte form field suite.

/forms View
020

PinInput

Segmented OTP and verification-code entry.

/pininput View
021

UploadDropzone

Drag, paste, and validate file uploads.

/uploaddropzone View
022

Switch

Accessible boolean toggle with three sizes.

/switch View
023

Slider

Styled range input with value formatting.

/slider View
024

SegmentedControl

Joined picker for mutually exclusive options.

/segmentedcontrol View
025

FilterChips

Toggleable chips for search and filtering.

/filterchips View
026

RatingStars

Keyboard-friendly star rating control.

/ratingstars View
027

Stepper

Multi-step progress and completion control.

/stepper View
028

Accordion

Collapsible content sections with smooth motion.

/accordion View
029

Tabs

ARIA-correct tabbed content switcher.

/tabs View
030

CommandPalette

Spotlight-style fuzzy command launcher.

/commandpalette View
031

ContextMenu

Right-click and keyboard context menu.

/contextmenu View
032

HoldToConfirm

Press-and-hold confirmation for risky actions.

/holdtoconfirm View
033

CopyButton

Clipboard button with copied-state feedback.

/copybutton View
034

KbdShortcut

Platform-aware keyboard shortcut display.

/kbdshortcut View
035

Tooltip

Accessible hover and focus tooltip.

/tooltip View
03

Feedback & Identity

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

12 in this shelf
01 / 12
036

NotificationCentre

Bell trigger with a dropdown inbox: unread badge, grouping, and mark-as-read.

/notificationcentre View
037

ToastNotification

Stackable global alerts with actions.

/toastnotification View
038

AlertBanner

Inline status banner for common tones.

/alertbanner View
039

EmptyState

Reusable nothing-here-yet placeholder.

/emptystate View
040

SkeletonLoader

Placeholder primitives for loading content.

/skeletonloader View
041

ProgressRing

Circular determinate and indeterminate progress.

/progressring View
042

ProgressBar

Linear progress indicator with labels and variants.

/progressbar View
043

Spinner

Indeterminate loading indicator in multiple styles.

/spinner View
044

BadgePill

Status pills, tags, and dismissible chips.

/badgepill View
045

Avatar

User image with initials and status fallback.

/avatar View
046

AvatarStack

Overlapping avatars with overflow handling.

/avatarstack View
047

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
048

Typewriter

Cycling typewriter text with a cursor.

/typewriter View
049

ShinyText

Configurable shimmer sweep for text.

/shinytext View
050

ScrambledText

Glyph shuffle that resolves into readable copy.

/scrambledtext View
051

TrueFocus

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

/truefocus View
052

VariableProximity

Cursor-reactive variable-font typography.

/variableproximity View
053

GlitchText

RGB channel split and clip-band text glitch.

/glitchtext View
054

SplitFlap

Mechanical board character flip animation.

/splitflap View
055

TickerTape

Structured infinite-scroll information strip.

/tickertape View
056

Marquee

Infinite scrolling content rail with pause-on-hover.

/marquee View
057

CodeBlock

Token-coloured code display with copy support.

/codeblock View
058

Countdown

Animated timer for deadlines and launches.

/countdown View
059

CountUp

Locale-aware number animation primitive.

/countup View
060

Timeline

Animated timeline for milestones and events.

/timeline View
05

Cards & Layout

Composed surfaces, showcases, and reusable content layouts.

12 in this shelf
01 / 12
061

Kanban

Drag-and-drop board with columns, card reordering, and keyboard move support.

/kanban View
062

CardStack

Interactive horizontal card stack.

/cardstack View
063

CardStackMotionFlip

4-direction rolling deck with scoped keyboard control.

/cardstackmotionflip View
064

BentoGrid

Responsive grid system for modern layouts.

/bentogrid View
065

Divider

Section separator with optional label and orientation.

/divider View
066

ExpandingCard

Card that smoothly expands into detail.

/expandingcard View
067

ScratchToReveal

Canvas scratch-off reveal interaction.

/scratchtoreveal View
068

StreamShowcase

Editorial carousel for streaming-style shelves.

/streamshowcase View
069

Cardwall

Perspective billboard wall with drifting cards.

/cardwall View
070

InteractiveCards

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

/interactivecards View
071

MagicCard

Card spotlight driven by pointer position.

/magiccard View
072

MorphingDialog

Shared-element transition dialog.

/morphingdialog View
06

Motion Primitives

Composable motion wrappers and pointer-driven effects.

16 in this shelf
01 / 16
073

ShineBorder

Animated border with sweeping shine.

/shineborder View
074

SwishButton

Button text slide and accent motion.

/swishbutton View
075

MagneticButton

Button that drifts toward the cursor.

/magneticbutton View
076

ClickSpark

Click-triggered particle burst wrapper.

/clickspark View
077

LinkImageHover

Links with floating image preview on hover.

/linkimagehover View
078

AnimatedBeam

SVG beams for connected-flow diagrams.

/animatedbeam View
079

ScrollReveal

Viewport-entry stagger reveal primitive.

/scrollreveal View
080

OrbitalRing

Circular orbital layout with auto-rotation.

/orbitalring View
081

MagnetGrid

Grid cells displaced by cursor proximity.

/magnetgrid View
082

PixelTrail

Cursor-tracked decaying pixel trail.

/pixeltrail View
083

RippleGrid

Event-driven ripple waves across a grid.

/ripplegrid View
084

GSAP Suite

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

/gsap-suite View
085

EqualizerBars

CSS equalizer indicator with phased bars.

/equalizerbars View
086

ConfettiBurst

Imperative canvas celebration burst.

/confettiburst View
087

Tilt3D

Cursor-driven 3D rotation wrapper.

/tilt3d View
088

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
089

AuroraBackdrop

Layered pure-CSS aurora surface.

/aurora-backdrop View
090

MeshGradient

Animated mesh-gradient backdrop.

/meshgradient View
091

MembraneHero

Fluid-mesh editorial hero surface.

/membrane-hero View
092

PerspectiveGrid

CSS 3D perspective grid backdrop.

/perspectivegrid View
093

NoiseField

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

/noisefield View
094

NeonSign

Glowing neon-tube text treatment.

/neonsign View
095

CRTScreen

Retro screen frame with scanlines and roll.

/crtscreen View
096

HoloCard

Holographic foil shimmer wrapper.

/holocard View
097

ElectricBorder

SVG-filter electric border effect.

/electricborder View
098

TopologyColorGrid

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

/topologycolorgrid View
08

Data & Visualisation

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

13 in this shelf
01 / 13
099

Sparkline

Tiny inline SVG trend line for tables, stat cards, and dashboards.

/sparkline View
100

LineChart

Responsive SVG line chart with axes, gridlines, and a hover crosshair tooltip.

/linechart View
101

BarChart

SVG bar chart supporting grouped and stacked modes with value labels.

/barchart View
102

DonutChart

SVG donut and pie chart with legend, centre label, and arc hover.

/donutchart View
103

DataGrid

Two grid implementations for tabular data.

/datagrid View
104

CalendarHeatmap

GitHub-style contribution calendar.

/calendarheatmap View
105

Gantt

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

/gantt View
106

BubblePacking

Force-directed circle packing view.

/bubblepacking View
107

RadialCluster

Hierarchical radial dendrogram.

/radialcluster View
108

Sunburst

Zoomable hierarchical chart.

/sunburst View
109

WordCloud

Frequency-weighted text cloud.

/wordcloud View
110

Sankey

Expandable flow visualisation.

/sankey View
111

ExplainerCanvas

Connected concept-mapping canvas.

/explainercanvas View
09

Media & Portfolio

Image comparison, galleries, and portfolio-grade presentation.

03 in this shelf
01 / 03
112

BeforeAfter

Draggable before/after image comparison.

/beforeafter View
113

DomeGallery

3D spherical image gallery.

/domegallery View
114

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
115

Editor

CRUD editor backed by database data when configured.

/editor View
116

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
117

Maps

Interactive Leaflet maps with markers and search.

/maps View
118

Location

Locate-me, delivery, and routing demos.

/location View
119

GlobePresence

High-performance 3D globe visualisation.

/globepresence View
120

GeoViz

Choropleth and spike-map visualisations.

/geo View
12

Library Operations

Maintenance, QA, delivery, and copy-paste tooling for the component catalogue.

10 in this shelf
01 / 10
121

ComponentHealthMatrix

Catalogue QA dashboard for docs, demos, screenshots, tests, and theme support.

/componenthealthmatrix View
122

EvidenceCard

Compact delivery proof card for commands, files, screenshots, and blockers.

/evidencecard View
123

CopyPasteComposer

Build copy-ready file, dependency, and usage bundles from catalogue metadata.

/copypastecomposer View
124

ThemeTokenInspector

Live inspector for chrome, brand, and semantic theme-token behaviour.

/themetokeninspector View
125

AgentLaneBoard

Room delivery board for agent owners, blockers, files, and acceptance gates.

/agentlaneboard View
126

RoutePreviewRail

Scrollable visual QA rail for live component routes and screenshot proof.

/routepreviewrail View
127

TokenSwatchGrid

Grouped theme-token swatches with usage notes and contrast labels.

/tokenswatchgrid View
128

InteractionLab

Motion and interaction QA lab for timing, easing, risk, and reduced-motion review.

/interactionlab View
129

DataVizInspector

Chart QA inspector for source, rows, units, alt text, and legend readiness.

/datavizinspector View
130

MediaLightboxPro

Dependency-free media proof gallery with modal viewing and wraparound navigation.

/medialightboxpro View
13

Auth & OSS Demo

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

03 in this shelf
01 / 03
131

Auth Demo

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

/auth View
132

Dashboard

Protected route example with session data.

/dashboard View
133

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