KitlenoKitlenov2.0.0

Actions & Display / Pricing

Pricing

Pricing tables help visitors compare plans and pick the right one. These ones are minimalistic and responsive.

SaaS Pricing

A premium three-tier pricing table with the recommended plan elevated in the brand accent color. Prices, descriptions, and buttons stay aligned across every column.

Starter

$0/mo

Try it out, no credit card required.

  • 1 project
  • Community support
  • Basic analytics
Get started
Popular

Pro

$29/mo

For teams ready to scale.

  • Unlimited projects
  • Priority support
  • Advanced analytics
  • Custom domains
  • Team roles
Get started

Enterprise

$99/mo

For organizations with advanced needs.

  • Everything in Pro
  • SSO & SAML
  • Dedicated support
  • Custom contracts
Get started
SaasPricing.jsx
import Link from 'next/link'
import { Check, Sparkles } from 'lucide-react'

// Add or edit your pricing plans here
const PLANS = [
  {
    name: 'Starter',
    price: '$0',
    period: '/mo',
    description: 'Try it out, no credit card required.',
    features: ['1 project', 'Community support', 'Basic analytics'],
    highlighted: false,
  },
  {
    name: 'Pro',
    price: '$29',
    period: '/mo',
    description: 'For teams ready to scale.',
    features: ['Unlimited projects', 'Priority support', 'Advanced analytics', 'Custom domains', 'Team roles'],
    highlighted: true,
  },
  {
    name: 'Enterprise',
    price: '$99',
    period: '/mo',
    description: 'For organizations with advanced needs.',
    features: ['Everything in Pro', 'SSO & SAML', 'Dedicated support', 'Custom contracts'],
    highlighted: false,
  },
]

export default function SaasPricing() {
  return (
    <div className="@container w-full">
      <div className="grid grid-cols-1 @2xl:grid-cols-3 gap-6 items-stretch">
        {PLANS.map((plan) => (
          <div
            key={plan.name}
            className={`relative h-full flex flex-col rounded-2xl p-8 transition-all duration-200 hover:-translate-y-0.5 ${
              plan.highlighted
                ? 'pt-10 ring-1 ring-[#7e60d6]/40 bg-gradient-to-b from-[#7e60d6]/[0.06] to-transparent dark:from-[#7e60d6]/[0.12] shadow-[0_20px_60px_-20px_rgba(126,96,214,.45)]'
                : 'border border-[#E0E0E0] dark:border-[#4C4C4C] bg-white/80 dark:bg-[#1e1e1e]/80 backdrop-blur-md hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,.12)]'
            }`}>
            {plan.highlighted && (
              <span className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-[#7e60d6] px-3 py-1 text-[11px] font-semibold text-white whitespace-nowrap">
                <Sparkles size={11} strokeWidth={2.5} />
                Popular
              </span>
            )}

            <h3 className="text-[15px] font-semibold text-[#121212] dark:text-[#f1f1f1]">{plan.name}</h3>
            <div className="mt-4 flex items-baseline gap-1">
              <span className="text-[42px] font-bold tracking-tight text-[#121212] dark:text-[#f1f1f1]">
                {plan.price}
              </span>
              <span className="text-[13px] text-[#4b4b4b] dark:text-[#b5b5b5]">{plan.period}</span>
            </div>
            <p className="mt-2 min-h-[40px] text-[13px] leading-relaxed text-[#4b4b4b] dark:text-[#b5b5b5]">
              {plan.description}
            </p>

            <ul className="mt-8 flex-1 flex flex-col gap-3.5">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-start gap-2.5">
                  <Check
                    size={15}
                    className={`mt-[1px] shrink-0 ${plan.highlighted ? 'text-[#7e60d6]' : 'text-[#4b4b4b] dark:text-[#b5b5b5]'}`}
                    strokeWidth={2}
                  />
                  <span className="text-[13px] text-[#121212] dark:text-[#f1f1f1]">{feature}</span>
                </li>
              ))}
            </ul>

            <Link
              href="#"
              className={`mt-6 rounded-full py-2.5 text-center text-[13px] font-medium transition-colors cursor-pointer ${
                plan.highlighted
                  ? 'bg-[#7e60d6] text-white hover:bg-[#6d51c2]'
                  : 'bg-[#E8E8E8] border-2 border-[#E0E0E0] text-[#121212] hover:bg-[#F1F1F1] dark:bg-[#2A2A2A] dark:border-[#4C4C4C] dark:text-[#f1f1f1] dark:hover:bg-[#1E1E1E]'
              }`}>
              Get started
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

SaaS Pricing with Toggle

The same premium three-tier pricing table, with a Monthly/Yearly billing toggle so visitors can compare annual savings before choosing a plan.

Save 17% yearly

Starter

$0/mo

Try it out, no credit card required.

  • 1 project
  • Community support
  • Basic analytics
Get started
Popular

Pro

$29/mo

For teams ready to scale.

  • Unlimited projects
  • Priority support
  • Advanced analytics
  • Custom domains
  • Team roles
Get started

Enterprise

$99/mo

For organizations with advanced needs.

  • Everything in Pro
  • SSO & SAML
  • Dedicated support
  • Custom contracts
Get started
SaasPricingToggle.jsx
'use client'

import Link from 'next/link'
import { useState } from 'react'
import { Check, Sparkles } from 'lucide-react'

// Add or edit your pricing plans here
const PLANS = [
  {
    name: 'Starter',
    price: { monthly: '$0', yearly: '$0' },
    description: 'Try it out, no credit card required.',
    features: ['1 project', 'Community support', 'Basic analytics'],
    highlighted: false,
  },
  {
    name: 'Pro',
    price: { monthly: '$29', yearly: '$290' },
    description: 'For teams ready to scale.',
    features: ['Unlimited projects', 'Priority support', 'Advanced analytics', 'Custom domains', 'Team roles'],
    highlighted: true,
  },
  {
    name: 'Enterprise',
    price: { monthly: '$99', yearly: '$990' },
    description: 'For organizations with advanced needs.',
    features: ['Everything in Pro', 'SSO & SAML', 'Dedicated support', 'Custom contracts'],
    highlighted: false,
  },
]

const parsePrice = (value) => Number(value.replace(/[^0-9.]/g, '')) || 0

export default function SaasPricingToggle() {
  const [yearly, setYearly] = useState(false)

  const highlightedPlan = PLANS.find((plan) => plan.highlighted) || PLANS[PLANS.length - 1]
  const yearlySavings = Math.round(
    (1 - parsePrice(highlightedPlan.price.yearly) / (parsePrice(highlightedPlan.price.monthly) * 12)) * 100
  )

  return (
    <div className="@container w-full">
      <div className="flex flex-col items-center gap-3 mb-3 @2xl:flex-row @2xl:justify-center @2xl:mb-8">
        <div className="inline-flex items-center rounded-full border border-[#E0E0E0] dark:border-[#4C4C4C] bg-[#F1F1F1] dark:bg-[#2A2A2A] p-1">
          <button
            onClick={() => setYearly(false)}
            className={`rounded-full px-4 py-1.5 text-[13px] font-medium transition-colors cursor-pointer ${
              !yearly ? 'bg-white dark:bg-[#1e1e1e] text-[#121212] dark:text-[#f1f1f1] shadow-sm' : 'text-[#4b4b4b] dark:text-[#b5b5b5]'
            }`}>
            Monthly
          </button>
          <button
            onClick={() => setYearly(true)}
            className={`rounded-full px-4 py-1.5 text-[13px] font-medium transition-colors cursor-pointer ${
              yearly ? 'bg-white dark:bg-[#1e1e1e] text-[#121212] dark:text-[#f1f1f1] shadow-sm' : 'text-[#4b4b4b] dark:text-[#b5b5b5]'
            }`}>
            Yearly
          </button>
        </div>
        <span className="text-[12px] font-medium text-[#7e60d6]">Save {yearlySavings}% yearly</span>
      </div>

      <div className="grid grid-cols-1 @2xl:grid-cols-3 gap-6 items-stretch">
        {PLANS.map((plan) => (
          <div
            key={plan.name}
            className={`relative h-full flex flex-col rounded-2xl p-8 transition-all duration-200 hover:-translate-y-0.5 ${
              plan.highlighted
                ? 'pt-10 ring-1 ring-[#7e60d6]/40 bg-gradient-to-b from-[#7e60d6]/[0.06] to-transparent dark:from-[#7e60d6]/[0.12] shadow-[0_20px_60px_-20px_rgba(126,96,214,.45)]'
                : 'border border-[#E0E0E0] dark:border-[#4C4C4C] bg-white/80 dark:bg-[#1e1e1e]/80 backdrop-blur-md hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,.12)]'
            }`}>
            {plan.highlighted && (
              <span className="absolute -top-3 left-1/2 -translate-x-1/2 flex items-center gap-1 rounded-full bg-[#7e60d6] px-3 py-1 text-[11px] font-semibold text-white whitespace-nowrap">
                <Sparkles size={11} strokeWidth={2.5} />
                Popular
              </span>
            )}

            <h3 className="text-[15px] font-semibold text-[#121212] dark:text-[#f1f1f1]">{plan.name}</h3>
            <div className="mt-4 flex items-baseline gap-1">
              <span className="text-[42px] font-bold tracking-tight text-[#121212] dark:text-[#f1f1f1]">
                {yearly ? plan.price.yearly : plan.price.monthly}
              </span>
              <span className="text-[13px] text-[#4b4b4b] dark:text-[#b5b5b5]">{yearly ? '/yr' : '/mo'}</span>
            </div>
            <p className="mt-2 min-h-[40px] text-[13px] leading-relaxed text-[#4b4b4b] dark:text-[#b5b5b5]">
              {plan.description}
            </p>

            <ul className="mt-8 flex-1 flex flex-col gap-3.5">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-start gap-2.5">
                  <Check
                    size={15}
                    className={`mt-[1px] shrink-0 ${plan.highlighted ? 'text-[#7e60d6]' : 'text-[#4b4b4b] dark:text-[#b5b5b5]'}`}
                    strokeWidth={2}
                  />
                  <span className="text-[13px] text-[#121212] dark:text-[#f1f1f1]">{feature}</span>
                </li>
              ))}
            </ul>

            <Link
              href="#"
              className={`mt-6 rounded-full py-2.5 text-center text-[13px] font-medium transition-colors cursor-pointer ${
                plan.highlighted
                  ? 'bg-[#7e60d6] text-white hover:bg-[#6d51c2]'
                  : 'bg-[#E8E8E8] border-2 border-[#E0E0E0] text-[#121212] hover:bg-[#F1F1F1] dark:bg-[#2A2A2A] dark:border-[#4C4C4C] dark:text-[#f1f1f1] dark:hover:bg-[#1E1E1E]'
              }`}>
              Get started
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

Minimal Pricing

A restrained two-tier pricing table with generous whitespace and hairline borders, refined with subtle depth so every price, description, and button lines up perfectly across columns.

Starter

$0/mo

For individuals trying things out.

  • 1 project
  • Community support
  • Basic analytics
Get started

Pro

$19/mo

For growing teams that need more.

  • Unlimited projects
  • Priority support
  • Advanced analytics
  • Custom domains
Get started
MinimalPricing.jsx
import Link from 'next/link'
import { Check } from 'lucide-react'

// Add or edit your pricing plans here
const PLANS = [
  {
    name: 'Starter',
    price: '$0',
    period: '/mo',
    description: 'For individuals trying things out.',
    features: ['1 project', 'Community support', 'Basic analytics'],
    highlighted: false,
  },
  {
    name: 'Pro',
    price: '$19',
    period: '/mo',
    description: 'For growing teams that need more.',
    features: ['Unlimited projects', 'Priority support', 'Advanced analytics', 'Custom domains'],
    highlighted: true,
  },
]

export default function MinimalPricing() {
  return (
    <div className="@container w-full">
      <div className="grid grid-cols-1 @lg:grid-cols-2 gap-6 items-stretch">
        {PLANS.map((plan) => (
          <div
            key={plan.name}
            className={`h-full flex flex-col rounded-2xl border p-8 transition-all duration-200 hover:-translate-y-0.5 ${
              plan.highlighted
                ? 'border-[#D8D8DC] dark:border-[#4A4A4A] bg-[#FAFAFA] dark:bg-[#1c1c1c] hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,.15)]'
                : 'border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,.12)]'
            }`}>
            <h3 className="text-[15px] font-medium tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
              {plan.name}
            </h3>
            <div className="mt-4 flex items-baseline gap-1">
              <span className="text-[42px] font-bold tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
                {plan.price}
              </span>
              <span className="text-[13px] text-[#6e6e73] dark:text-[#a1a1a6]">{plan.period}</span>
            </div>
            <p className="mt-2 min-h-[40px] text-[13px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
              {plan.description}
            </p>

            <ul className="mt-8 flex-1 flex flex-col gap-3">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2.5">
                  <span className="flex items-center justify-center rounded-full bg-[#1d1d1f]/5 dark:bg-white/10 p-[3px]">
                    <Check size={12} className="text-[#1d1d1f] dark:text-[#f5f5f7]" strokeWidth={2.5} />
                  </span>
                  <span className="text-[13px] text-[#1d1d1f] dark:text-[#f5f5f7]">{feature}</span>
                </li>
              ))}
            </ul>

            <Link
              href="#"
              className="mt-6 border border-black/15 dark:border-white/20 rounded-full py-2.5 text-center text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-black/[0.03] dark:hover:bg-white/[0.06] transition-colors cursor-pointer">
              Get started
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}

Minimal Pricing with Toggle

The same restrained two-tier pricing table, with a Monthly/Yearly billing toggle so visitors can switch between plans and see the annual discount.

Save 2 months yearly

Starter

$0/mo

For individuals trying things out.

  • 1 project
  • Community support
  • Basic analytics
Get started

Pro

$19/mo

For growing teams that need more.

  • Unlimited projects
  • Priority support
  • Advanced analytics
  • Custom domains
Get started
MinimalPricingToggle.jsx
'use client'

import Link from 'next/link'
import { useState } from 'react'
import { Check } from 'lucide-react'

// Add or edit your pricing plans here
const PLANS = [
  {
    name: 'Starter',
    price: { monthly: '$0', yearly: '$0' },
    description: 'For individuals trying things out.',
    features: ['1 project', 'Community support', 'Basic analytics'],
    highlighted: false,
  },
  {
    name: 'Pro',
    price: { monthly: '$19', yearly: '$190' },
    description: 'For growing teams that need more.',
    features: ['Unlimited projects', 'Priority support', 'Advanced analytics', 'Custom domains'],
    highlighted: true,
  },
]

const parsePrice = (value) => Number(value.replace(/[^0-9.]/g, '')) || 0

export default function MinimalPricingToggle() {
  const [yearly, setYearly] = useState(false)

  const highlightedPlan = PLANS.find((plan) => plan.highlighted) || PLANS[PLANS.length - 1]
  const monthsSaved = Math.round(
    12 - parsePrice(highlightedPlan.price.yearly) / parsePrice(highlightedPlan.price.monthly)
  )

  return (
    <div className="@container w-full">
      <div className="flex flex-col items-center gap-3 mb-3 @lg:flex-row @lg:justify-center @lg:mb-8">
        <div className="inline-flex items-center rounded-full border border-[#E5E5E5] dark:border-[#3A3A3A] bg-[#FAFAFA] dark:bg-[#1c1c1c] p-1">
          <button
            onClick={() => setYearly(false)}
            className={`rounded-full px-4 py-1.5 text-[13px] font-medium transition-colors cursor-pointer ${
              !yearly ? 'bg-white dark:bg-[#161616] text-[#1d1d1f] dark:text-[#f5f5f7] shadow-sm' : 'text-[#6e6e73] dark:text-[#a1a1a6]'
            }`}>
            Monthly
          </button>
          <button
            onClick={() => setYearly(true)}
            className={`rounded-full px-4 py-1.5 text-[13px] font-medium transition-colors cursor-pointer ${
              yearly ? 'bg-white dark:bg-[#161616] text-[#1d1d1f] dark:text-[#f5f5f7] shadow-sm' : 'text-[#6e6e73] dark:text-[#a1a1a6]'
            }`}>
            Yearly
          </button>
        </div>
        <span className="text-[12px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7]">Save {monthsSaved} months yearly</span>
      </div>

      <div className="grid grid-cols-1 @lg:grid-cols-2 gap-6 items-stretch">
        {PLANS.map((plan) => (
          <div
            key={plan.name}
            className={`h-full flex flex-col rounded-2xl border p-8 transition-all duration-200 hover:-translate-y-0.5 ${
              plan.highlighted
                ? 'border-[#D8D8DC] dark:border-[#4A4A4A] bg-[#FAFAFA] dark:bg-[#1c1c1c] hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,.15)]'
                : 'border-[#E5E5E5] dark:border-[#3A3A3A] bg-white/70 dark:bg-[#161616]/70 backdrop-blur-xl hover:shadow-[0_8px_30px_-12px_rgba(0,0,0,.12)]'
            }`}>
            <h3 className="text-[15px] font-medium tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
              {plan.name}
            </h3>
            <div className="mt-4 flex items-baseline gap-1">
              <span className="text-[42px] font-bold tracking-tight text-[#1d1d1f] dark:text-[#f5f5f7]">
                {yearly ? plan.price.yearly : plan.price.monthly}
              </span>
              <span className="text-[13px] text-[#6e6e73] dark:text-[#a1a1a6]">{yearly ? '/yr' : '/mo'}</span>
            </div>
            <p className="mt-2 min-h-[40px] text-[13px] leading-relaxed text-[#6e6e73] dark:text-[#a1a1a6]">
              {plan.description}
            </p>

            <ul className="mt-8 flex-1 flex flex-col gap-3">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center gap-2.5">
                  <span className="flex items-center justify-center rounded-full bg-[#1d1d1f]/5 dark:bg-white/10 p-[3px]">
                    <Check size={12} className="text-[#1d1d1f] dark:text-[#f5f5f7]" strokeWidth={2.5} />
                  </span>
                  <span className="text-[13px] text-[#1d1d1f] dark:text-[#f5f5f7]">{feature}</span>
                </li>
              ))}
            </ul>

            <Link
              href="#"
              className="mt-6 border border-black/15 dark:border-white/20 rounded-full py-2.5 text-center text-[13px] font-medium text-[#1d1d1f] dark:text-[#f5f5f7] hover:bg-black/[0.03] dark:hover:bg-white/[0.06] transition-colors cursor-pointer">
              Get started
            </Link>
          </div>
        ))}
      </div>
    </div>
  )
}