Svelte 5 Component Templates

Framework7-style navigation bar with hamburger menu and left-sliding panel. Features smooth animations, backdrop overlay, and scrollable menu for any number of items.

• ✓ Left panel menu
• ✓ Smooth animations
• ✓ Keyboard accessible
• ✓ Mobile-first design

Interactive horizontal card displays with two-stage interaction: hover to preview, click to reveal. Enhanced version includes swipe gestures and keyboard navigation.

• ✓ Two-stage interaction
• ✓ Swipe to cycle
• ✓ Keyboard navigation
• ✓ Fully responsive

Two variants: Static marquee with pause-on-hover, and interactive marquee with click-and-drag control. Both feature seamless infinite loop animation.

• ✓ Static & Interactive
• ✓ Pause on hover
• ✓ Click & drag
• ✓ Momentum scrolling

Interactive cards with dynamic spotlight effects that follow your cursor, creating an illuminated area with glowing borders for an engaging user experience.

• ✓ Mouse tracking
• ✓ Dynamic spotlight
• ✓ Border glow
• ✓ Theme support

Animated border component with a smooth horizontal shine effect. Wrap any content to add an elegant, attention-grabbing animated border with customisable colours and timing.

• ✓ Customisable colours
• ✓ CSS animations
• ✓ Flexible sizing
• ✓ Zero dependencies

Animated button with swishing text transition and expanding background dot effect. Features smooth text slides and an arrow icon on hover for engaging CTAs.

• ✓ Text slide animation
• ✓ Background expansion
• ✓ Native events
• ✓ Customisable styling

Interactive card that smoothly transitions between compact and expanded layouts using Svelte's crossfade. Perfect for galleries, portfolios, or progressive content disclosure.

• ✓ Crossfade transitions
• ✓ Layout morphing
• ✓ Click to toggle
• ✓ Responsive design

Link component with image preview on hover. Images appear above links with a smooth blur transition, perfect for adding visual context to documentation and references.

• ✓ Image preview
• ✓ Blur transitions
• ✓ Customisable size
• ✓ Inline usage

Complete CRUD demonstration with database integration and graceful fallback. Features full Create, Read, Update, and Delete operations with validation, loading states, and accessible modal UI.

• ✓ Full CRUD operations
• ✓ Database integration
• ✓ Form validation
• ✓ Graceful fallback

Two data grid implementations: a lightweight self-contained version for small datasets and a production-ready wrapper around SVAR Grid for large datasets. Features sorting, filtering, pagination, inline editing, and CSV export.

• ✓ Two implementations
• ✓ Sorting & filtering
• ✓ Virtual scrolling
• ✓ CSV export

Comprehensive collection of reusable form field components with validation, accessibility, and consistent styling. Includes text inputs, selects, checkboxes, radios, ranges, dates, switches, and colour pickers.

• ✓ 14 field components
• ✓ Full validation
• ✓ Accessibility first
• ✓ Type-safe props