Neo-Brutalist 4-Color Block Pricing

pricing

Header neo-brutalist pricing grid featuring 4 color blocks, thick borders, hard offset shadows, and discount pills.

#pricing#brutalist#blocks#currency-toggle

Live Interactive Preview

NO BS PRICING

CHOOSE YOUR TIER

BASIC

$15/mo

Core UI components

Community Discord

Standard updates

PRO BUNDLE

HOT

$45/mo

All 50+ components

Commercial license

Priority support

Lifetime updates

TEAM HUB

$85/mo

10 Developer seats

Design System Kit

Private Slack channel

Custom tokens

AGENCY

$175/mo

Unlimited clients

Dedicated code review

Custom components

1-on-1 calls

Component Source Code

Select language in the dropdown

BrutalistPricing.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Check } from 'lucide-react';
5
6export default function BrutalistPricing() {
7  const [currency, setCurrency] = useState<'USD' | 'INR'>('USD');
8  const [period, setPeriod] = useState<'monthly' | 'yearly'>('monthly');
9
10  const symbol = currency === 'USD' ? '$' : '₹';
11  const mult = currency === 'USD' ? 1 : 80;
12  const off = period === 'yearly' ? 0.8 : 1;
13
14  const plans = [
15    { title: 'BASIC', color: 'bg-yellow-300 dark:bg-yellow-950', price: Math.round(15 * mult * off), features: ['Core UI components', 'Community Discord', 'Standard updates'] },
16    { title: 'PRO BUNDLE', color: 'bg-pink-300 dark:bg-pink-950', price: Math.round(45 * mult * off), featured: true, features: ['All 50+ components', 'Commercial license', 'Priority support', 'Lifetime updates'] },
17    { title: 'TEAM HUB', color: 'bg-cyan-300 dark:bg-cyan-950', price: Math.round(85 * mult * off), features: ['10 Developer seats', 'Design System Kit', 'Private Slack channel', 'Custom tokens'] },
18    { title: 'AGENCY', color: 'bg-lime-300 dark:bg-lime-950', price: Math.round(175 * mult * off), features: ['Unlimited clients', 'Dedicated code review', 'Custom components', '1-on-1 calls'] }
19  ];
20
21  return (
22    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 font-mono select-none">
23      {/* Section Header */}
24      <div className="flex flex-col items-center text-center mb-8">
25        <span className="rounded-md border-2 border-slate-900 dark:border-slate-100 bg-amber-300 dark:bg-amber-400 px-3 py-1 text-[11px] font-black text-slate-900 uppercase">
26          NO BS PRICING
27        </span>
28        <h2 className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-slate-100 mt-3">
29          CHOOSE YOUR TIER
30        </h2>
31      </div>
32
33      <div className="flex flex-col items-center gap-4 mb-8">
34        <div className="flex items-center gap-2 rounded-2xl border-3 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 p-2 shadow-[4px_4px_0px_0px_#000] dark:shadow-[4px_4px_0px_0px_#fff]">
35          <button
36            onClick={() => setCurrency('USD')}
37            className={`flex items-center gap-1 px-3 py-1 text-xs font-black rounded-xl border-2 border-slate-900 dark:border-slate-100 transition ${currency === 'USD' ? 'bg-amber-300 dark:bg-amber-400 text-slate-900' : 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100'}`}
38          >
39            {currency === 'USD' && <Check className="h-3 w-3" />}
40            <span>USD ($)</span>
41          </button>
42          <button
43            onClick={() => setCurrency('INR')}
44            className={`flex items-center gap-1 px-3 py-1 text-xs font-black rounded-xl border-2 border-slate-900 dark:border-slate-100 transition ${currency === 'INR' ? 'bg-amber-300 dark:bg-amber-400 text-slate-900' : 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100'}`}
45          >
46            {currency === 'INR' && <Check className="h-3 w-3" />}
47            <span>INR (₹)</span>
48          </button>
49          <div className="h-5 w-0.5 bg-slate-900 dark:bg-slate-100 mx-1" />
50          <button
51            onClick={() => setPeriod('monthly')}
52            className={`flex items-center gap-1 px-3 py-1 text-xs font-black rounded-xl border-2 border-slate-900 dark:border-slate-100 transition ${period === 'monthly' ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900' : 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100'}`}
53          >
54            {period === 'monthly' && <Check className="h-3 w-3" />}
55            <span>MONTHLY</span>
56          </button>
57          <button
58            onClick={() => setPeriod('yearly')}
59            className={`flex items-center gap-1 px-3 py-1 text-xs font-black rounded-xl border-2 border-slate-900 dark:border-slate-100 transition ${period === 'yearly' ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900' : 'bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100'}`}
60          >
61            {period === 'yearly' && <Check className="h-3 w-3" />}
62            <span>YEARLY [-20%]</span>
63          </button>
64        </div>
65      </div>
66
67      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
68        {plans.map((p, i) => (
69          <div
70            key={i}
71            className={`rounded-3xl border-3 border-slate-900 dark:border-slate-100 p-6 min-h-[460px] flex flex-col justify-between transition-all ${p.color} text-slate-900 dark:text-slate-100 shadow-[6px_6px_0px_0px_#000] dark:shadow-[6px_6px_0px_0px_#fff] ${
72              p.featured ? 'scale-[1.02]' : ''
73            }`}
74          >
75            <div>
76              <div className="flex items-center justify-between">
77                <h3 className="text-lg font-black">{p.title}</h3>
78                {p.featured && <span className="rounded-lg border-2 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 px-2 py-0.5 text-[10px] font-black">HOT</span>}
79              </div>
80              <div className="mt-4 flex items-baseline gap-1">
81                <span className="text-3xl font-black">{symbol}{p.price.toLocaleString()}</span>
82                <span className="text-xs font-bold text-slate-700 dark:text-slate-300">/{period === 'monthly' ? 'mo' : 'yr'}</span>
83              </div>
84              <div className="mt-6 space-y-2.5 border-t-2 border-slate-900 dark:border-slate-100 pt-4 text-xs font-black">
85                {p.features.map((f, idx) => (
86                  <div key={idx} className="flex items-center gap-2">
87                    <Check className="h-4 w-4 shrink-0 stroke-[3]" />
88                    <span>{f}</span>
89                  </div>
90                ))}
91              </div>
92            </div>
93            <button className="mt-8 w-full rounded-2xl border-3 border-slate-900 dark:border-slate-100 bg-white dark:bg-slate-800 hover:bg-slate-900 hover:text-white dark:hover:bg-slate-100 dark:hover:text-slate-900 py-3 text-xs font-black shadow-[3px_3px_0px_0px_#000] dark:shadow-[3px_3px_0px_0px_#fff] transition">
94              SELECT {p.title}
95            </button>
96          </div>
97        ))}
98      </div>
99    </div>
100  );
101}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/pricing/BrutalistPricing.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import NeoBrutalist4ColorBlockPricing from '@/components/pricing/BrutalistPricing';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <NeoBrutalist4ColorBlockPricing />
7    </main>
8  );
9}