Pricing Sections

JetShip offers four Pricing Section variants to accommodate both subscription-based and one-time payment models. Each variant is designed to be flexible, visually appealing, and seamlessly integrates with your project.

You can manage pricing data directly in the apps/web/src/configs/billingConfig.ts file, ensuring that your pricing remains dynamic and easy to update. For demonstration purposes, sample files apps/web/src/assets/data/pricingSubscriptionData.ts and apps/web/src/assets/data/pricingOneOffData.ts showcase how your pricing data should be structured.

Note

These sample files are for illustration purposes only. To enable actual payments, update the plan IDs and price IDs with the correct values from your payment provider (Stripe or Lemon Squeezy).

---

1. Pricing Subscription Section

The Pricing Subscription Section is designed to showcase recurring pricing plans with a clean, structured layout. This variant is ideal for SaaS applications, memberships, and other subscription-based services.

⚙️ Props

• title (required) – The main heading of the pricing section.
• description (optional) – A short paragraph providing additional context about the pricing options.
• data (required) – An array containing subscription plans and their details.
• className (optional) – Tailwind CSS classes for styling the section.
• transitionDelay (optional) – Delay before animations start, allowing for staggered animations.
• transitionDuration (optional) – Duration of the animations for smooth transitions.

👀 Preview and Code

You can update the data used in the Pricing Subscription Section from the apps/web/src/assets/data/pricingSubscriptionData.ts file.

Preview

Code

import PricingSubscription from '@repo/ui/blocks/pricing/PricingSubscription'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import pricingSubscriptionData from '@/assets/data/pricingSubscriptionData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      <PricingSubscription
        title={...}
        description={...}
        data={pricingSubscriptionData}
      />
    </SectionWrapper>
  )
}

export default Component

---

2. Pricing Subscription Outlined Section

The Pricing Subscription Outlined Section offers a variation of the standard subscription section with an elegant outlined design, making it visually distinct while maintaining the same structure.

⚙️ Props

• title (required) – The main heading of the pricing section.
• description (optional) – Additional context or promotional messaging.
• data (required) – An array containing subscription plans.
• className (optional) – Tailwind CSS classes for styling the section.
• transitionDelay (optional) – Delay before animations start.
• transitionDuration (optional) – Duration of the animation effects.

👀 Preview and Code

You can update the data used in the Pricing Subscription Outlined Section from the apps/web/src/assets/data/pricingSubscriptionData.ts file.

Preview

Code

import PricingSubscriptionOutlined from '@repo/ui/blocks/pricing/PricingSubscriptionOutlined'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import pricingSubscriptionData from '@/assets/data/pricingSubscriptionData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      <PricingSubscriptionOutlined
        title={...}
        description={...}
        data={pricingSubscriptionData}
      />
    </SectionWrapper>
  )
}

export default Component

---

3. Pricing One-Off Section

The Pricing One-Off Section is designed for one-time purchases rather than recurring subscriptions. It provides a structured layout for listing one-time purchase plans, making it suitable for software licenses, digital products, or lifetime deals.

⚙️ Props

• title (required) – The main heading of the pricing section.
• description (optional) – A brief description of the one-time purchase options.
• data (required) – An array containing one-time pricing plans.
• className (optional) – Tailwind CSS classes for styling the section.
• transitionDelay (optional) – Delay before animations start.
• transitionDuration (optional) – Duration of the animation effects.

👀 Preview and Code

You can update the data used in the Pricing One-Off Section from the apps/web/src/assets/data/pricingOneOffData.ts file.

Preview

Code

import PricingOneOff from '@repo/ui/blocks/pricing/PricingOneOff'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import pricingOneOffData from '@/assets/data/pricingOneOffData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      <PricingOneOff
        title={...}
        description={...}
        data={pricingOneOffData}
      />
    </SectionWrapper>
  )
}

export default Component

---

4. Pricing One-Off Outlined Section

The Pricing One-Off Outlined Section is a variation of the standard one-off pricing section, featuring an outlined design for a more refined look.

⚙️ Props

• title (required) – The main heading of the pricing section.
• description (optional) – A brief summary of the one-time purchase options.
• data (required) – An array containing one-time pricing plans.
• className (optional) – Tailwind CSS classes for styling the section.
• transitionDelay (optional) – Delay before animations start.
• transitionDuration (optional) – Duration of the animation effects.

👀 Preview and Code

You can update the data used in the Pricing One-Off Outlined Section from the apps/web/src/assets/data/pricingOneOffData.ts file.

Preview

Code

import PricingOneOffOutlined from '@repo/ui/blocks/pricing/PricingOneOffOutlined'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import pricingOneOffData from '@/assets/data/pricingOneOffData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      <PricingOneOffOutlined
        title={...}
        description={...}
        data={pricingOneOffData}
      />
    </SectionWrapper>
  )
}

export default Component