Brutalist Pricing

High impact, stylized comparison block with bold borders and hover pop-out effects.Copy Markdown

Preview

A bold design specifically optimized for high-contrast, brutalist themes. It scales up the middle tier dramatically.

Unlock Your Potential

Brutalist, high-contrast pricing that gets straight to the point.

Base

$19/MO

Good for getting started.

Single User
Basic Exports
Email Support

HOT

Pro

$49/MO

For heavy hitters and pros.

Up to 5 Users
High-Res Exports
Priority Support
API Access

Studio

$99/MO

For creative teams.

Unlimited Users
Custom Domains
24/7 Phone Support

Usage with Props

You can customize the pricing tiers by passing your own data. This follows the high-contrast brutalist design while allowing for dynamic content.

import { BrutalistPricing, BrutalistPricingTier } from "@/components/nurav-ui/BrutalistPricing";

export default function App() {
  const tiers: BrutalistPricingTier[] = [
    {
      name: "Standard",
      description: "For individuals.",
      price: "$10",
      priceDescriptor: "/MO",
      features: ["Single User", "1GB Storage"],
      buttonText: "Buy Standard",
    },
    {
      name: "Ultra",
      description: "For hardcore teams.",
      price: "$30",
      priceDescriptor: "/MO",
      features: ["Up to 10 Users", "Unlimited Storage", "API Access"],
      buttonText: "Buy Ultra",
      isPopular: true,
      popularBadgeText: "OP",
    },
    {
      name: "Max",
      description: "For enterprises.",
      price: "$80",
      priceDescriptor: "/MO",
      features: ["Unlimited Everything", "SLA Support", "Dedicated Rep"],
      buttonText: "Buy Max",
    }
  ];

  return (
    <div className="w-full">
      <BrutalistPricing 
        title="Unlock Your Potential" 
        description="Brutalist, high-contrast pricing that gets straight to the point."
        tiers={tiers} 
      />
    </div>
  );
}

Installation

Automatic (CLI)

The fastest way to install this pricing block is using the setup CLI.

Before using the @nurav-ui alias, add this to your components.json:

components.json

{
  "registries": {
    "@nurav-ui": "https://nurav-ui.vercel.app/r"
  }
}

Or skip alias setup entirely and use the direct URL below.

Terminal

npx shadcn@latest add @nurav-ui/brutalist-pricing

Alternatively, install via direct URL (no components.json changes needed):

Terminal

npx shadcn@latest add https://nurav-ui.vercel.app/r/brutalist-pricing.json

Manual Setup

If you prefer building it manually, you can just copy and paste the code below directly into your project.

Create the Component

Add the following code to components/nurav-ui/BrutalistPricing.tsx:

BrutalistPricing.tsx

"use client";

import React from "react";
import { motion } from "motion/react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

export interface BrutalistPricingTier {
  name: string;
  description: string;
  price: string;
  priceDescriptor?: string;
  features: string[];
  buttonText: string;
  isPopular?: boolean;
  popularBadgeText?: string;
}

export interface BrutalistPricingProps {
  title?: React.ReactNode;
  description?: React.ReactNode;
  tiers?: BrutalistPricingTier[];
}

const defaultTiers: BrutalistPricingTier[] = [
  {
    name: "Base",
    description: "Good for getting started.",
    price: "$19",
    priceDescriptor: "/MO",
    features: ["Single User", "Basic Exports", "Email Support"],
    buttonText: "Buy Base",
  },
  {
    name: "Pro",
    description: "For heavy hitters and pros.",
    price: "$49",
    priceDescriptor: "/MO",
    features: [
      "Up to 5 Users",
      "High-Res Exports",
      "Priority Support",
      "API Access",
    ],
    buttonText: "Buy Pro",
    isPopular: true,
    popularBadgeText: "HOT",
  },
  {
    name: "Studio",
    description: "For creative teams.",
    price: "$99",
    priceDescriptor: "/MO",
    features: ["Unlimited Users", "Custom Domains", "24/7 Phone Support"],
    buttonText: "Buy Studio",
  },
];

export const BrutalistPricing = ({
  title = "Unlock Your Potential",
  description = "Brutalist, high-contrast pricing that gets straight to the point.",
  tiers = defaultTiers,
}: BrutalistPricingProps) => {
  return (
    <section className="w-full py-8 px-3 bg-background">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-20">
          <h2 className="text-5xl font-black tracking-tighter text-foreground mb-4 uppercase italic">
            {title}
          </h2>
          <p className="text-xl text-muted-foreground font-medium">
            {description}
          </p>
        </div>

        <div className="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-4 max-w-5xl mx-auto">
          {tiers.map((tier, idx) => {
            const isPro = tier.isPopular;

            return (
              <div
                key={idx}
                className={cn(
                  "w-full transition-all duration-300 relative bg-background",
                  isPro
                    ? "lg:w-[40%] p-10 border-4 border-primary shadow-[12px_12px_0px_0px_rgba(var(--primary),1)] z-10 lg:-mx-4 lg:-my-8 hover:translate-x-[-4px] hover:translate-y-[-4px] hover:shadow-[16px_16px_0px_0px_rgba(var(--primary),1)]"
                    : "lg:w-1/3 p-8 border-[3px] border-foreground shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] hover:translate-x-[-4px] hover:translate-y-[-4px] hover:shadow-[12px_12px_0px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_0px_rgba(255,255,255,1)]",
                )}
              >
                {isPro && tier.popularBadgeText && (
                  <div className="absolute top-0 right-0 bg-primary text-primary-foreground font-black uppercase px-4 py-1 text-sm border-b-4 border-l-4 border-foreground">
                    {tier.popularBadgeText}
                  </div>
                )}

                <h3
                  className={cn(
                    "font-black uppercase mb-4",
                    isPro
                      ? "text-3xl text-primary"
                      : "text-2xl text-foreground",
                  )}
                >
                  {tier.name}
                </h3>

                <div className="mb-6">
                  <span
                    className={cn(
                      "font-black text-foreground",
                      isPro ? "text-6xl" : "text-5xl",
                    )}
                  >
                    {tier.price}
                  </span>
                  {tier.priceDescriptor && (
                    <span className="text-foreground font-bold">
                      {tier.priceDescriptor}
                    </span>
                  )}
                </div>

                <p
                  className={cn(
                    "text-foreground font-bold mb-8",
                    isPro ? "text-lg" : "",
                  )}
                >
                  {tier.description}
                </p>

                <ul
                  className={cn(
                    "space-y-4 mb-10 font-bold",
                    isPro ? "text-lg" : "",
                  )}
                >
                  {tier.features.map((ft, i) => (
                    <li key={i} className={cn("flex items-center gap-2")}>
                      <Check
                        className={cn(
                          "rounded-full p-1 border-2",
                          isPro
                            ? "w-7 h-7 border-[3px] border-primary text-primary/90"
                            : "w-6 h-6 border-foreground text-foreground",
                        )}
                      />
                      {ft}
                    </li>
                  ))}
                </ul>

                <button
                  className={cn(
                    "w-full py-4 text-xl font-black uppercase tracking-widest transition-colors",
                    isPro
                      ? "bg-primary text-primary-foreground hover:opacity-90"
                      : "bg-foreground text-background hover:bg-foreground/90",
                  )}
                >
                  {tier.buttonText}
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

Props