Product Details Component for Svelte and React

Bootstrap your product details page in your Svelte and React applications with the help of this versatile component, with fully functioning image carousel, collapsible content, and checkout functionality automatically passing selected options to your preferred checkout URL. Add as many custom options as you need with the help of the options prop.

This component comes with the following features:

• Multiple framework support: The package includes code for the <ProductDetails /> component written for React and Svelte meaning you’ll get two different implementation with this product, so you can use it with different tech stacks.
• Configurable: Fully customize the details you present to your visitors with the help of props. Set every aspect of your product details.
• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component. Three different preconfigured themes are also provided with the stylesheets, including light and dark themes.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser support: The component was tested on major browsers (Chrome, Firefox, and Edge) to ensure cross-browser compatibility.

// Import the relevant component
import { PricingTable } from '@components/PricingTable.tsx'
import PricingTable from '@components/PricingTable.svelte'

// Calling the component with possible options on your page
<ProductDetails
    images={[{
        src: '/path/to/img.src',
        alt: 'Your alt text'
    }]}
    tabs={[{
        title: 'Product Details',
        content: '...'
    }]}
    title="Product's Title"
    inStock={true}
    rating={5}
    reviewCount={123}
    price={99}
    defaultQuantity={1}
    disclaimer="Add an optional disclaimer text..."
    options={[{
        name: 'Size',
        values: ['XS', 'S', 'M', 'L']
    }]}
    sellerLink="/seller"
/>