# Pricing 3

> Three-card pricing with plan icons and feature comparison.

A shadcn/ui block from the [@efferd](https://efferd.com/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/efferd/pricing-3).

- Page, with a live preview: https://shadcn.exchange/r/efferd/pricing-3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/efferd/pricing-3-light-9a9c151a23a819e8.png
- Registry item: https://efferd.com/r/pricing-3.json
- Categories: pricing
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://efferd.com/r/pricing-3.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`

## Files

### `registry/blocks/pricing/3/pricing-section.tsx`

```tsx
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import * as PricingCard from "@/components/pricing-card";

export function PricingSection() {
	return (
		<section className="w-full">
			<div className="mx-auto mb-4 max-w-md space-y-2">
				<div className="flex justify-center">
					<div className="rounded-md border px-4 py-1 text-sm">Pricing</div>
				</div>
				<h2 className="font-heading text-center font-bold text-2xl tracking-tight md:text-3xl lg:font-extrabold lg:text-4xl">
					Plans that Scale with You
				</h2>
				<p className="text-center text-muted-foreground text-sm md:text-base">
					Whether you're just starting out or growing fast, our flexible pricing
					has you covered.
				</p>
			</div>
			<div className="mx-auto grid w-full max-w-4xl gap-4 p-6 md:grid-cols-3">
				{plans.map((plan, index) => (
					<PricingCard.Card
						className={cn("w-full max-w-full", index === 1 && "md:scale-105")}
						key={plan.name}
					>
						<PricingCard.Header isPopular={index === 1}>
							<PricingCard.Plan>
								<PricingCard.PlanName>
									{plan.icon}
									<span>{plan.name}</span>
								</PricingCard.PlanName>
								{plan.badge && (
									<PricingCard.Badge>{plan.badge}</PricingCard.Badge>
								)}
							</PricingCard.Plan>
							<PricingCard.Price>
								<PricingCard.MainPrice>{plan.price}</PricingCard.MainPrice>
								<PricingCard.Period>{plan.period}</PricingCard.Period>
								{plan.original && (
									<PricingCard.OriginalPrice className="ml-auto">
										{plan.original}
									</PricingCard.OriginalPrice>
								)}
							</PricingCard.Price>
							<Button
								className={cn("w-full font-semibold")}
								variant={plan.variant as "outline" | "default"}
							>
								Get Started
							</Button>
						</PricingCard.Header>

						<PricingCard.Body>
							<PricingCard.Description>
								{plan.description}
							</PricingCard.Description>
							<PricingCard.List>
								{plan.features.map((item) => (
									<PricingCard.ListItem className="text-xs" key={item}>
										<IconPlaceholder
											aria-hidden="true"
											className="size-4 text-foreground"
											hugeicons="CheckmarkCircle04Icon"
											lucide="CheckCircle2"
											phosphor="CheckCircleIcon"
											remixicon="RiCheckboxCircleLine"
											tabler="IconCircleCheck"
										/>
										<span>{item}</span>
									</PricingCard.ListItem>
								))}
							</PricingCard.List>
						</PricingCard.Body>
					</PricingCard.Card>
				))}
			</div>
		</section>
	);
}

const plans = [
	{
		icon: (
			<IconPlaceholder
				hugeicons="UserMultipleIcon"
				lucide="Users"
				phosphor="UsersIcon"
				remixicon="RiGroupLine"
				tabler="IconUsers"
			/>
		),
		description: "Perfect for individuals",
		name: "Basic",
		price: "Free",
		variant: "outline",
		features: [
			"Automated Meeting Scheduling",
			"Basic Calendar Sync",
			"Daily Schedule Overview",
			"Email Reminders",
			"Task Management",
			"24/7 Customer Support",
			"Single User Access",
			"Basic Reporting",
			"Mobile App Access",
		],
	},
	{
		icon: (
			<IconPlaceholder
				hugeicons="Briefcase01Icon"
				lucide="Briefcase"
				phosphor="BriefcaseIcon"
				remixicon="RiBriefcaseLine"
				tabler="IconBriefcase"
			/>
		),
		description: "Ideal for small teams",
		name: "Pro",
		badge: "Popular",
		price: "$29",
		original: "$39",
		period: "/month",
		variant: "default",
		features: [
			"All Basic Plan Features",
			"Advanced Calendar Integrations",
			"Customizable Notifications",
			"Priority Support",
			"Analytics and Insights",
			"Group Scheduling",
			"Multiple User Roles",
			"Advanced Reporting",
			"Custom Branding Options",
		],
	},
	{
		icon: (
			<IconPlaceholder
				hugeicons="Building01Icon"
				lucide="Building"
				phosphor="BuildingsIcon"
				remixicon="RiBuilding2Line"
				tabler="IconBuilding"
			/>
		),
		name: "Enterprise",
		description: "Perfect for large scale companies",
		price: "$99",
		original: "$129",
		period: "/month",
		variant: "outline",
		features: [
			"All Pro Plan Features",
			"Dedicated Account Manager",
			"Custom Integrations",
			"Advanced Security Features",
			"Team Collaboration Tools",
			"Onboarding and Training",
			"Unlimited Users",
			"API Access with Higher Limits",
			"Advanced Audit Logs",
		],
	},
];
```

### `registry/blocks/pricing/3/pricing-card.tsx`

```tsx
import { cn } from "@/lib/utils";
import type React from "react";

function Card({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn(
				"relative w-full max-w-xs rounded-xl border bg-background p-1",
				className
			)}
			{...props}
		/>
	);
}

function Header({
	className,
	children,
	isPopular,
	...props
}: React.ComponentProps<"div"> & {
	isPopular?: boolean;
}) {
	return (
		<div
			className={cn(
				"relative mb-4 rounded-xl border p-4",
				isPopular && "bg-card shadow-xs",
				className
			)}
			{...props}
		>
			{children}
		</div>
	);
}

function Plan({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn("mb-8 flex items-center justify-between", className)}
			{...props}
		/>
	);
}

function Description({ className, ...props }: React.ComponentProps<"p">) {
	return (
		<p className={cn("text-muted-foreground text-xs", className)} {...props} />
	);
}

function PlanName({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn(
				"flex items-center gap-2 font-medium text-sm [&_svg:not([class*='size-'])]:size-4",
				className
			)}
			{...props}
		/>
	);
}

function Badge({ className, ...props }: React.ComponentProps<"span">) {
	return (
		<span
			className={cn(
				"rounded-full border bg-background px-3 py-1 text-xs shadow-xs",
				className
			)}
			{...props}
		/>
	);
}

function Price({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div className={cn("mb-3 flex items-end gap-1", className)} {...props} />
	);
}

function MainPrice({ className, ...props }: React.ComponentProps<"span">) {
	return (
		<span
			className={cn("font-extrabold text-3xl tracking-tight", className)}
			{...props}
		/>
	);
}

function Period({ className, ...props }: React.ComponentProps<"span">) {
	return (
		<span
			className={cn("pb-1 text-muted-foreground text-sm", className)}
			{...props}
		/>
	);
}

function OriginalPrice({ className, ...props }: React.ComponentProps<"span">) {
	return (
		<span
			className={cn(
				"mr-1 ml-auto text-lg text-muted-foreground line-through",
				className
			)}
			{...props}
		/>
	);
}

function Body({ className, ...props }: React.ComponentProps<"div">) {
	return <div className={cn("space-y-6 p-3", className)} {...props} />;
}

function List({ className, ...props }: React.ComponentProps<"ul">) {
	return <ul className={cn("space-y-3", className)} {...props} />;
}

function ListItem({ className, ...props }: React.ComponentProps<"li">) {
	return (
		<li
			className={cn(
				"flex items-start gap-3 text-muted-foreground text-sm",
				className
			)}
			{...props}
		/>
	);
}

function Separator({
	children = "Upgrade to access",
	className,
	...props
}: React.ComponentProps<"div"> & {
	children?: string;
	className?: string;
}) {
	return (
		<div
			className={cn(
				"flex items-center gap-3 text-muted-foreground text-sm",
				className
			)}
			{...props}
		>
			<span className="h-px flex-1 bg-border" />
			<span className="shrink-0 text-muted-foreground">{children}</span>
			<span className="h-px flex-1 bg-border" />
		</div>
	);
}

export {
	Card,
	Header,
	Description,
	Plan,
	PlanName,
	Badge,
	Price,
	MainPrice,
	Period,
	OriginalPrice,
	Body,
	List,
	ListItem,
	Separator,
};
```