# Pricing Section v1

> Four-tier pricing grid with plan highlights, feature lists, and primary call-to-action buttons.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/pricing-section-v1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/pricing-section-v1-light-d9765e69d22c9513.png
- Registry item: https://uiception.com/r/pricing-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/pricing-section-v1.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: `badge`, `button`, `card`

## Files

### `registry/new-york/blocks/pricing-section-v1/page.tsx`

```tsx
import PricingSectionV1 from "./components/pricing-section-v1"

export default function Page() {
  return <PricingSectionV1 />
}
```

### `registry/new-york/blocks/pricing-section-v1/components/pricing-section-v1.tsx`

```tsx
import PricingCard from "./pricing-card"
import { pricingPlans } from "../lib/pricing-plans"
import { Badge } from "@/components/ui/badge"

export default function PricingSectionV1() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto mb-10 max-w-3xl text-center">
          <h2 className="mb-2 text-4xl font-medium tracking-tight text-balance md:text-5xl">
            Priced To Scale.
          </h2>
          <Badge
            variant="secondary"
          >
           Limited Spots Available.
          </Badge>
        </div>
        <ul className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
          {pricingPlans.map((plan) => (
            <PricingCard key={plan.id} plan={plan} />
          ))}
        </ul>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/pricing-section-v1/components/pricing-card.tsx`

```tsx
import { CheckIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import type { PricingPlan } from "../lib/pricing-plans"

type PricingCardProps = {
  plan: PricingPlan
}

export default function PricingCard({ plan }: PricingCardProps) {
  return (
      <Card>
        <CardHeader>
          <CardTitle className="text-muted-foreground uppercase">
            {plan.name}
          </CardTitle>
          <CardDescription className="text-muted-foreground">
            {plan.subtitle}
          </CardDescription>
          <div className="flex items-end gap-2">
            <p className="text-4xl leading-none font-semibold tracking-tight">
              {plan.priceLabel}
            </p>
            {plan.priceSuffix ? (
              <p className="pb-2 text-muted-foreground">
                {plan.priceSuffix}
              </p>
            ) : null}
          </div>
        </CardHeader>
        <CardContent className="flex-1 px-5 pt-4 pb-5">
          <p className="mb-3 text-sm font-medium text-foreground">
            {plan.intro}
          </p>
          <ul className="flex flex-col gap-2">
            {plan.features.map((feature) => (
              <li
                key={feature}
                className="flex items-start gap-2 text-sm leading-relaxed font-light text-muted-foreground"
              >
                <CheckIcon
                  aria-hidden={true}
                  className="mt-0.5 size-4 shrink-0 text-muted-foreground"
                />
                <span>{feature}</span>
              </li>
            ))}
          </ul>
        </CardContent>
        <CardFooter className="border-t-0 bg-transparent p-4">
          <Button
            className="w-full rounded-full"
            variant={plan.ctaVariant ?? "default"}
          >
            {plan.ctaLabel}
          </Button>
        </CardFooter>
      </Card>
  )
}
```

### `registry/new-york/blocks/pricing-section-v1/lib/pricing-plans.ts`

```ts
export type PricingPlan = {
  id: "core" | "max" | "ultra" | "full-service"
  name: string
  subtitle: string
  priceLabel: string
  priceSuffix?: string
  intro: string
  features: string[]
  ctaLabel: string
  ctaVariant?: "default" | "outline"
}

export const pricingPlans: PricingPlan[] = [
  {
    id: "core",
    name: "Starter",
    subtitle: "For individuals and small teams",
    priceLabel: "$29",
    priceSuffix: "/month",
    intro: "Everything you need to launch:",
    features: [
      "Up to 10,000 monthly active users",
      "3 team workspaces",
      "Unlimited projects and tasks",
      "Slack and Google Workspace integrations",
      "Basic analytics dashboard",
      "Email support",
    ],
    ctaLabel: "Get Started",
    ctaVariant: "default",
  },
  {
    id: "max",
    name: "Growth",
    subtitle: "For scaling product and operations teams",
    priceLabel: "$99",
    priceSuffix: "/month",
    intro: "Everything in Starter, plus:",
    features: [
      "Up to 50,000 monthly active users",
      "Advanced workflow automations",
      "Custom fields and role permissions",
      "API access with higher rate limits",
      "Priority email and chat support",
    ],
    ctaLabel: "Get Started",
    ctaVariant: "default",
  },
  {
    id: "ultra",
    name: "Business",
    subtitle: "For mature teams with advanced requirements",
    priceLabel: "$249",
    priceSuffix: "/month",
    intro: "Everything in Growth, plus:",
    features: [
      "Up to 200,000 monthly active users",
      "Single sign-on (SAML/SSO)",
      "Audit logs and security controls",
      "Custom reporting and data exports",
      "Dedicated customer success manager",
    ],
    ctaLabel: "Get Started",
    ctaVariant: "default",
  },
  {
    id: "full-service",
    name: "Enterprise",
    subtitle: "For large organizations with compliance needs",
    priceLabel: "Custom",
    intro: "Everything in Business, plus:",
    features: [
      "Unlimited seats and advanced user governance",
      "Dedicated infrastructure and data residency",
      "SOC 2 support and custom compliance terms",
      "Custom SLAs and premium support",
      "Enterprise onboarding and technical training",
      "Quarterly architecture and optimization reviews",
    ],
    ctaLabel: "Book a Call",
    ctaVariant: "outline",
  },
]
```