Neo Pricing Card

Neo Pricing Card

Stacked pricing card with features list and multiple variants

Pro

$29/month
  • Unlimited projects
  • Priority support
  • Custom domain
1
import { NeoPricingCard } from "@/components/ui/neo-pricing-card"
2
3
export function NeoPricingCardDemo() {
4
  return (
5
    <NeoPricingCard
6
      planName="Pro"
7
      price="$29"
8
      features={['Unlimited projects', 'Priority support', 'Custom domain']}
9
    />
10
  )
11
}
1
<NeoPricingCard
2
  planName="Pro"
3
  price="$29"
4
  features={['Unlimited projects', 'Priority support', 'Custom domain']}
5
/>

Installation

npx shadcn@latest add https://grainio.vercel.app/r/NeoBrutalism/NeoPricingCard.json

Examples

Sizes

Starter

$9/month
  • 5 projects
  • Basic support

Pro

$29/month
  • Unlimited projects
  • Priority support

Enterprise

$99/month
  • All features
  • 24/7 support
  • SLA
1
<NeoPricingCard size="sm" planName="Starter" price="$9" features={['5 projects', 'Basic support']} />
2
<NeoPricingCard size="md" planName="Pro" price="$29" features={['Unlimited projects', 'Priority support']} />
3
<NeoPricingCard size="lg" planName="Enterprise" price="$99" features={['All features', '24/7 support', 'SLA']} />

Variants

Stacked

$19/month
  • Layered shadow effect
  • Classic neo-brutalism

Flat

$19/month
  • Simple drop shadow
  • Clean look

Bordered

$19/month
  • Thick border
  • No shadow
1
<NeoPricingCard variant="stacked" planName="Stacked" price="$19" features={['Layered shadow effect']} />
2
<NeoPricingCard variant="flat" planName="Flat" price="$19" features={['Simple drop shadow']} />
3
<NeoPricingCard variant="bordered" planName="Bordered" price="$19" features={['Thick border']} />

Highlighted with Badge

Basic

Free
  • 1 project
  • Community support
Most Popular

Pro

$29/month
  • Unlimited projects
  • Priority support
  • Custom domain
Best Value

Team

$79/month
  • Everything in Pro
  • 5 team members
  • Analytics
1
<NeoPricingCard planName="Basic" price="Free" period="" features={['1 project']} />
2
<NeoPricingCard highlighted badge="Most Popular" planName="Pro" price="$29" features={['Unlimited projects']} />
3
<NeoPricingCard badge="Best Value" planName="Team" price="$79" features={['Everything in Pro']} />