Pricing

Quickly build pricing plans for subscription based pricing model.

Finder component

Basic example

Icon

Easy Start

$5
/month
  • 3x more views
  • Top ads for 3 days
  • Moving up the list
  • Featured badge in the results
Choose plan
Icon

Fast Sale

$15
/month
  • 10x more views
  • Top ads for 5 days
  • Moving up the list
  • Featured badge in the results
Choose plan
import PricingPlan from '../components/PricingPlan'

{/* Button click handler */}
const handleClick = (e) => {
  alert('You've chosen ' + e.currentTarget.dataset.plan + ' pricing plan')
}

{/* Default pricing plan */}
<PricingPlan
  image={{
    src: '/images/pricing/icon-1.svg',
    width: '72',
    height: '88',
    alt: 'Icon'
  }}
  title='Easy Start'
  price='$5'
  period='month'
  options={[
    {title: '3x more views', available: true},
    {title: 'Top ads for 3 days', available: true},
    {title: 'Moving up the list', available: false},
    {title: 'Featured badge in the results', available: false}
  ]}
  button={{
    href: '#',
    title: 'Choose plan',
    variant: 'outline-primary rounded-pill',
    props: {
      onClick: handleClick,
      'data-plan': 'Easy Start'
    }
  }}
/>

{/* Featured (popular) pricing plan */}
<PricingPlan
  featured
  image={{
    src: '/images/pricing/icon-2.svg',
    width: '72',
    height: '88',
    alt: 'Icon'
  }}
  title='Fast Sale'
  price='$15'
  period='month'
  options={[
    {title: '10x more views', available: true},
    {title: 'Top ads for 5 days', available: true},
    {title: 'Moving up the list', available: true},
    {title: 'Featured badge in the results', available: false}
  ]}
  button={{
    href: '#',
    title: 'Choose plan',
    variant: 'primary rounded-pill',
    props: {
      onClick: handleClick,
      'data-plan': 'Fast Sale'
    }
  }}
/>

Light version

Icon

Easy Start

$5
/month
  • 3x more views
  • Top ads for 3 days
  • Moving up the list
  • Featured badge in the results
Choose plan
Icon

Fast Sale

$15
/month
  • 10x more views
  • Top ads for 5 days
  • Moving up the list
  • Featured badge in the results
Choose plan
import PricingPlan from '../components/PricingPlan'
          
{/* Button click handler */}
const handleClick = (e) => {
  alert('You've chosen ' + e.currentTarget.dataset.plan + ' pricing plan')
}

{/* Light default pricing plan */}
<PricingPlan
  light
  image={{
    src: '/images/pricing/icon-1.svg',
    width: '72',
    height: '88',
    alt: 'Icon'
  }}
  title='Easy Start'
  price='$5'
  period='month'
  options={[
    {title: '3x more views', available: true},
    {title: 'Top ads for 3 days', available: true},
    {title: 'Moving up the list', available: false},
    {title: 'Featured badge in the results', available: false}
  ]}
  button={{
    href: '#',
    title: 'Choose plan',
    variant: 'outline-light rounded-pill',
    props: {
      onClick: handleClick,
      'data-plan': 'Easy Start'
    }
  }}
/>

{/* Light featured (popular) pricing plan */}
<PricingPlan
  light
  featured
  image={{
    src: '/images/pricing/icon-2.svg',
    width: '72',
    height: '88',
    alt: 'Icon'
  }}
  title='Fast Sale'
  price='$15'
  period='month'
  options={[
    {title: '10x more views', available: true},
    {title: 'Top ads for 5 days', available: true},
    {title: 'Moving up the list', available: true},
    {title: 'Featured badge in the results', available: false}
  ]}
  button={{
    href: '#',
    title: 'Choose plan',
    variant: 'primary rounded-pill',
    props: {
      onClick: handleClick,
      'data-plan': 'Fast Sale'
    }
  }}
/>