This page demonstrates components and their Svelte 5 compatibility.
Expandable accordion with customizable headers, styles, and content.
Status: ✅ Svelte 5 Ready (Using $props, $state, $effect, and {@render})
Rating: ★★★★☆ 4/5
This is the expandable content area of the accordion component. You can place any content here including text, images, forms, or other components.
The accordion handles the expand/collapse functionality automatically and is fully accessible with proper ARIA attributes for screen readers.
This example uses the header and openHeader attributes to change the header for the open state.
This second example demonstrates the accordion with different styling options
through the headerStyle and variant props.
Animated down arrow button that smoothly scrolls to the specified section.
Status: ✅ Svelte 5 Ready (Using $props and $state)
Rating: ★★★☆☆ 3/5
Scroll down to see the next section. The animated arrow will fade out as you scroll.
This is the target section that the AnimatedScroll component scrolls to.
Full-screen background with image or color and content panel.
Status: ⚠️ Needs Update (Currently using export let and slot)
Rating: ★★☆☆☆ 2/5
This component creates a full-width section with background image or color and a semi-transparent panel for content.
Styled container with title and customizable width variants.
Status: ⚠️ Needs Update (Currently using export let and slot)
Rating: ★★☆☆☆ 2/5
A full-width box with rounded corners.
It can contain any content and will take up the full available width.
A half-width box with sharp corners.
On smaller screens, it maintains a minimum width for better readability.
This is a quarter-width box.
Versatile content card with title, image, description and action buttons.
Status: ⚠️ Needs Update (Should use $props and children)
Rating: ★★★☆☆ 3/5
Basic Card
This is a simple card with just title, image and description.
Cards are useful for displaying content in a concise format.
Card with Button
This card includes a call-to-action button that links to another page.
Custom Styled Card (no image)
This card demonstrates custom styling options.
This component is designed to showcase a feature with a heading, left side, right side, and footer.
Status: ✅ Svelte 5 Ready (Using snippet syntax and $derived)
Rating: ★★★★★ 5/5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis vel augue venenatis fringilla. Proin hendrerit magna in nisl malesuada, vel mollis ante facilisis.
Footer information goes here
Site footer with navigation links, theme selection, and social media icons.
Status: ✅ Updated to Svelte 5 (Using $state and $effect)
Rating: ★★★★☆ 4/5
Page header with navigation, mobile responsive menu, and theme toggle.
Status: ✅ Svelte 5 Ready (Using $state, {@render} and snippet)
Rating: ★★★★☆ 4/5
Your business, in perfect rhythm
Reusable icon component that renders SVG icons with customizable styles.
Status: ✅ Svelte 5 Ready (Using $props)
Rating: ★★★☆☆ 4/5
Enhanced image component with lazy loading, responsive sizing, and optional caption.
Status: ⚠️ Needs Update (Should use $props)
Rating: ★★★☆☆ 3/5
Enhanced form input with validation, styling options, and accessibility features.
Rating: ★★★☆☆ 3/5
Must be at least 8 characters
Enter keywords to search our knowledge base
Pricing display components including PricingCard and PricingGrid.
Status: ⚠️ Needs Update (Should use $props and children)
Rating: ★★★☆☆ 3/5
UK clients may be billed in UK£. VAT is not included in the price. Clients outside the UK may be billed in US$.
Subscriptions are paid in advance and may be cancelled at any time preventing next payment. FREE Website is published on a YourOnline.app subdomain. Updates are published for your approval and updates can be reverted. Terms and Conditions.
Development and staging include hosting for the duration of the project. Domains and hosting of live sites is not included.
Eye-catching promotional component with time-sensitive offers and pricing details.
Status: ⚠️ Needs Update (Should use $props instead of export)
Rating: ★★★☆☆ 3/5
We are not running a special offer at this time. As we start with a free site, what more do you need? We will only do this until we have a full schedule, so start today if you know what you want.
If you are unsure, let's chat.
Customer testimonial display components including TestimonialCard and TestimonialGrid.
Status: ⚠️ Needs Update (Should use $props and children)
Rating: ★★★☆☆ 3/5
Discover how Cadence CRM helps businesses find their rhythm