# Pricing

> Pricing components for displaying pricing tables and comparison charts.

Web: https://vuemail.dev/components/pricing

Paste any snippet into an email built with Vuemail. The snippets are single file components that use the primitives from `@vuemaildev/vuemail`.

## Simple pricing table

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/simple-pricing-table

### Tailwind

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Container,
  Head,
  Hr,
  Html,
  Preview,
  Section,
  Text,
} from '@vuemaildev/vuemail';

const features = [
  'Manage up to 25 premium products',
  'Grow your audience with 10,000 subscribers',
  'Make data-driven decisions with advanced analytics',
  'Priority support with 24-hour response time',
  'Seamless integration with your favorite tools',
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>
        Exclusive Offer Just For You: Unlock Premium Features at $12/month
      </Preview>
      <Container class="bg-white rounded-[12px] mx-auto max-w-[500px] p-[24px]">
        <Section
          class="bg-white border border-solid border-gray-300 rounded-[12px] text-gray-600 p-[28px] w-full text-left mb-0"
        >
          <Text
            class="text-indigo-600 text-[12px] leading-[20px] font-semibold tracking-wide mb-[16px] mt-[16px] uppercase"
          >
            Exclusive Offer
          </Text>
          <Text class="text-[30px] font-bold leading-[36px] mb-[12px] mt-0">
            <span class="text-[rgb(16,24,40)]">$12</span>
            {{ ' ' }}
            <span class="text-[16px] font-medium leading-[20px]">/ month</span>
          </Text>
          <Text
            class="text-gray-700 text-[14px] leading-[20px] mt-[16px] mb-[24px]"
          >
            We've handcrafted the perfect plan tailored specifically for your
            needs. Unlock premium features at an unbeatable value.
          </Text>
          <ul
            class="text-gray-500 text-[14px] leading-[24px] mb-[32px] pl-[14px]"
          >
            <li
              v-for="feature in features"
              :key="feature"
              class="mb-[12px] relative"
            >
              <span class="relative">{{ feature }}</span>
            </li>
          </ul>
          <Button
            href="#"
            class="bg-indigo-600 rounded-[8px] box-border text-white inline-block text-[16px] leading-[24px] font-bold tracking-wide mb-[24px] max-w-full p-[14px] text-center w-full"
          >Claim Your Special Offer</Button>
          <Hr />
          <Text
            class="text-gray-500 text-[12px] leading-[16px] italic mt-[24px] mb-[6px] text-center"
          >
            Limited time offer - Upgrade now and save 20%
          </Text>
          <Text
            class="text-gray-500 text-[12px] m-0 leading-[16px] text-center"
          >
            No credit card required. 14-day free trial available.
          </Text>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Container,
  Head,
  Hr,
  Html,
  Preview,
  Section,
  Text,
} from '@vuemaildev/vuemail';

const features = [
  'Manage up to 25 premium products',
  'Grow your audience with 10,000 subscribers',
  'Make data-driven decisions with advanced analytics',
  'Priority support with 24-hour response time',
  'Seamless integration with your favorite tools',
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>
        Exclusive Offer Just For You: Unlock Premium Features at $12/month
      </Preview>
      <Container
        :style="{
          backgroundColor: 'rgb(255,255,255)',
          borderRadius: '12px',
          marginLeft: 'auto',
          marginRight: 'auto',
          maxWidth: '500px',
          padding: '24px',
        }"
      >
        <Section
          :style="{
            backgroundColor: 'rgb(255,255,255)',
            borderColor: 'rgb(209,213,219)',
            borderRadius: '12px',
            borderStyle: 'solid',
            borderWidth: '1px',
            color: 'rgb(75,85,99)',
            marginBottom: '0px',
            padding: '28px',
            textAlign: 'left',
            width: '100%',
          }"
        >
          <Text
            :style="{
              color: 'rgb(79,70,229)',
              fontSize: '12px',
              fontWeight: '600',
              letterSpacing: '0.025em',
              lineHeight: '20px',
              marginBottom: '16px',
              textTransform: 'uppercase',
            }"
          >
            Exclusive Offer
          </Text>
          <Text
            :style="{
              fontSize: '30px',
              fontWeight: '700',
              lineHeight: '36px',
              marginBottom: '12px',
              marginTop: '0px',
            }"
          >
            <span :style="{ color: 'rgb(16,24,40)' }">$12</span>
            {{ ' ' }}
            <span
              :style="{
                fontSize: '16px',
                fontWeight: '500',
                lineHeight: '20px',
              }"
            >/ month</span>
          </Text>
          <Text
            :style="{
              color: 'rgb(55,65,81)',
              fontSize: '14px',
              lineHeight: '20px',
              marginTop: '16px',
              marginBottom: '24px',
            }"
          >
            We've handcrafted the perfect plan tailored specifically for your
            needs. Unlock premium features at an unbeatable value.
          </Text>
          <ul
            :style="{
              color: 'rgb(107,114,128)',
              fontSize: '14px',
              lineHeight: '24px',
              marginBottom: '32px',
              paddingLeft: '14px',
            }"
          >
            <li
              v-for="feature in features"
              :key="feature"
              :style="{ marginBottom: '12px', position: 'relative' }"
            >
              <span :style="{ position: 'relative' }">{{ feature }}</span>
            </li>
          </ul>
          <Button
            href="#"
            :style="{
              backgroundColor: 'rgb(79,70,229)',
              borderRadius: '8px',
              boxSizing: 'border-box',
              color: 'rgb(255,255,255)',
              display: 'inline-block',
              fontSize: '16px',
              lineHeight: '24px',
              fontWeight: '700',
              letterSpacing: '0.025em',
              marginBottom: '24px',
              maxWidth: '100%',
              padding: '14px',
              textAlign: 'center',
              width: '100%',
            }"
          >Claim Your Special Offer</Button>
          <Hr />
          <Text
            :style="{
              color: 'rgb(107,114,128)',
              fontSize: '12px',
              lineHeight: '16px',
              fontStyle: 'italic',
              marginTop: '24px',
              marginBottom: '6px',
              textAlign: 'center',
            }"
          >
            Limited time offer - Upgrade now and save 20%
          </Text>
          <Text
            :style="{
              color: 'rgb(107,114,128)',
              fontSize: '12px',
              lineHeight: '16px',
              margin: '0px',
              textAlign: 'center',
            }"
          >
            No credit card required. 14-day free trial available.
          </Text>
        </Section>
      </Container>
    </Body>
  </Html>
</template>
```

## Two tiers with emphasized tier

Source: https://github.com/psycarlo/vuemail/tree/main/apps/web/components/two-tiers-with-emphasized-tier

### Tailwind

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Section,
  Text,
} from '@vuemaildev/vuemail';

const plans = [
  {
    title: 'Hobby',
    price: 29,
    highlighted: false,
    description: 'The perfect plan for getting started.',
    features: [
      '25 products',
      'Up to 10,000 subscribers',
      'Advanced analytics',
      '24-hour support response time',
    ],
    buttonText: 'Get started today',
    buttonUrl: '#',
  },
  {
    title: 'Enterprise',
    price: 99,
    highlighted: true,
    description: 'Dedicated support and enterprise ready.',
    features: [
      'Unlimited products',
      'Unlimited subscribers',
      'Advanced analytics',
      'Dedicated support representative',
      'Marketing automations',
      'Custom integrations',
    ],
    buttonText: 'Get started today',
    buttonUrl: '#',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Choose the right plan for you</Preview>
      <Container class="bg-white rounded-[8px] mx-auto max-w-[600px] p-[24px]">
        <Section class="mb-[42px]">
          <Heading class="text-[24px] leading-[32px] mb-[12px] text-center">
            Choose the right plan for you
          </Heading>
          <Text
            class="text-gray-500 text-[14px] leading-[20px] mx-auto max-w-[500px] text-center"
          >
            Choose an affordable plan with top features to engage audiences,
            build loyalty, and boost sales.
          </Text>
        </Section>
        <Section class="flex items-start gap-[20px] justify-center pb-[24px]">
          <Section
            v-for="plan in plans"
            :key="plan.title"
            :class="[
              plan.highlighted
                ? 'bg-[rgb(16,24,40)] border-[rgb(16,24,40)] text-gray-300 mb-[12px]'
                : 'bg-white border-gray-300 text-gray-600 mb-[24px]',
              'rounded-[8px] border border-solid p-[24px] text-left w-full',
            ]"
          >
            <Text
              :class="[
                plan.highlighted
                  ? 'text-[rgb(124,134,255)]'
                  : 'text-[rgb(79,70,229)]',
                'text-[14px] leading-[20px] font-semibold mb-[16px]',
              ]"
            >
              {{ plan.title }}
            </Text>
            <Text class="text-[28px] font-bold mb-[8px] mt-0">
              <span
                :class="
                  plan.highlighted
                    ? 'text-white'
                    : 'text-[rgb(16,24,40)]'
                "
              >${{ plan.price }}</span>
              {{ ' ' }}
              <span class="text-[14px] leading-[20px]">/ month</span>
            </Text>
            <Text class="mt-[12px] mb-[24px]">{{ plan.description }}</Text>
            <ul class="text-[12px] leading-[20px] mb-[30px] pl-[14px]">
              <li
                v-for="feature in plan.features"
                :key="feature"
                class="mb-[8px]"
              >
                {{ feature }}
              </li>
            </ul>
            <Button
              :href="plan.buttonUrl"
              class="bg-indigo-600 rounded-[8px] box-border text-white inline-block font-semibold m-0 max-w-full p-[12px] text-center w-full"
            >{{ plan.buttonText }}</Button>
          </Section>
        </Section>
        <Hr class="mt-0" />
        <Text
          class="text-gray-500 text-[12px] leading-[16px] font-medium mt-[30px] text-center"
        >
          Customer Experience Research Team
        </Text>
      </Container>
    </Body>
  </Html>
</template>
```

### Inline styles

```vue
<script setup lang="ts">
import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Section,
  Text,
} from '@vuemaildev/vuemail';

const plans = [
  {
    title: 'Hobby',
    price: 29,
    highlighted: false,
    description: 'The perfect plan for getting started.',
    features: [
      '25 products',
      'Up to 10,000 subscribers',
      'Advanced analytics',
      '24-hour support response time',
    ],
    buttonText: 'Get started today',
    buttonUrl: '#',
  },
  {
    title: 'Enterprise',
    price: 99,
    highlighted: true,
    description: 'Dedicated support and enterprise ready.',
    features: [
      'Unlimited products',
      'Unlimited subscribers',
      'Advanced analytics',
      'Dedicated support representative',
      'Marketing automations',
      'Custom integrations',
    ],
    buttonText: 'Get started today',
    buttonUrl: '#',
  },
];
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Preview>Choose the right plan for you</Preview>
      <Container
        :style="{
          backgroundColor: 'rgb(255,255,255)',
          borderRadius: '8px',
          marginLeft: 'auto',
          marginRight: 'auto',
          maxWidth: '600px',
          padding: '24px',
        }"
      >
        <Section :style="{ marginBottom: '42px' }">
          <Heading
            :style="{
              fontSize: '24px',
              lineHeight: '32px',
              marginBottom: '12px',
              textAlign: 'center',
            }"
          >
            Choose the right plan for you
          </Heading>
          <Text
            :style="{
              color: 'rgb(107,114,128)',
              fontSize: '14px',
              lineHeight: '20px',
              marginLeft: 'auto',
              marginRight: 'auto',
              maxWidth: '500px',
              textAlign: 'center',
            }"
          >
            Choose an affordable plan with top features to engage audiences,
            build loyalty, and boost sales.
          </Text>
        </Section>
        <Section
          :style="{
            alignItems: 'flex-start',
            display: 'flex',
            gap: '20px',
            justifyContent: 'center',
            paddingBottom: '24px',
          }"
        >
          <Section
            v-for="plan in plans"
            :key="plan.title"
            :style="{
              backgroundColor: plan.highlighted
                ? 'rgb(16,24,40)'
                : 'rgb(255,255,255)',
              borderColor: plan.highlighted
                ? 'rgb(16,24,40)'
                : 'rgb(209,213,219)',
              borderRadius: '8px',
              borderStyle: 'solid',
              borderWidth: '1px',
              color: plan.highlighted ? 'rgb(209,213,219)' : 'rgb(75,85,99)',
              marginBottom: plan.highlighted ? '12px' : '24px',
              padding: '24px',
              textAlign: 'left',
              width: '100%',
            }"
          >
            <Text
              :style="{
                color: plan.highlighted ? 'rgb(124,134,255)' : 'rgb(79,70,229)',
                fontSize: '14px',
                fontWeight: '600',
                lineHeight: '20px',
                marginBottom: '16px',
              }"
            >
              {{ plan.title }}
            </Text>
            <Text
              :style="{
                fontSize: '28px',
                fontWeight: '700',
                marginBottom: '8px',
                marginTop: '0px',
              }"
            >
              <span
                :style="{
                  color: plan.highlighted
                    ? 'rgb(255,255,255)'
                    : 'rgb(16,24,40)',
                }"
              >${{ plan.price }}</span>
              {{ ' ' }}
              <span
                :style="{ fontSize: '14px', lineHeight: '20px' }"
              >/ month</span>
            </Text>
            <Text :style="{ marginTop: '12px', marginBottom: '24px' }">
              {{ plan.description }}
            </Text>
            <ul
              :style="{
                fontSize: '12px',
                lineHeight: '20px',
                marginBottom: '30px',
                paddingLeft: '14px',
              }"
            >
              <li
                v-for="feature in plan.features"
                :key="feature"
                :style="{ marginBottom: '8px' }"
              >
                {{ feature }}
              </li>
            </ul>
            <Button
              :href="plan.buttonUrl"
              :style="{
                backgroundColor: 'rgb(79,70,229)',
                borderRadius: '8px',
                boxSizing: 'border-box',
                color: 'rgb(255,255,255)',
                display: 'inline-block',
                fontWeight: '600',
                margin: '0px',
                maxWidth: '100%',
                padding: '12px',
                textAlign: 'center',
                width: '100%',
              }"
            >{{ plan.buttonText }}</Button>
          </Section>
        </Section>
        <Hr :style="{ marginTop: '0px' }" />
        <Text
          :style="{
            color: 'rgb(107,114,128)',
            fontSize: '12px',
            lineHeight: '16px',
            fontWeight: '500',
            marginTop: '30px',
            textAlign: 'center',
          }"
        >
          Customer Experience Research Team
        </Text>
      </Container>
    </Body>
  </Html>
</template>
```
