# Pricing Section v5

> Three-tier pricing cards with a left-aligned headline, popular Pro plan, per-feature Tabler icons, and pill CTAs.

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

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

## Install

```bash
npx shadcn@latest add https://uiception.com/r/pricing-section-v5.json
```

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

## Dependencies

- npm packages: `@tabler/icons-react`
- Registry items: `button`

## Files

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

```tsx
import PricingSectionV5 from "./components/pricing-section-v5"

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

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

```tsx
import PricingCard from "./pricing-card"
import { pricingPlans } from "../lib/pricing-plans"

export default function PricingSectionV5() {
  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">
        <h2 className="max-w-2xl text-3xl font-medium tracking-tight text-balance text-foreground md:text-4xl lg:text-5xl lg:leading-[1.1]">
          Straightforward plans for every stage
        </h2>
        <ul className="mt-10 grid grid-cols-1 rounded-none border border-border bg-background lg:grid-cols-3 lg:grid-rows-[auto_auto_auto_auto_auto_1fr_auto]">
          {pricingPlans.map((plan) => (
            <PricingCard key={plan.id} plan={plan} />
          ))}
        </ul>
      </div>
    </section>
  )
}
```

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

```tsx
import type { Icon } from "@tabler/icons-react"
import {
  IconChartLine,
  IconClock,
  IconCoins,
  IconCpu,
  IconFolders,
  IconGauge,
  IconGitBranch,
  IconGlobe,
  IconHeadset,
  IconKey,
  IconLink,
  IconServer,
  IconShield,
  IconShieldCheck,
  IconShieldOff,
  IconSnowflake,
  IconStopwatch,
  IconUsers,
  IconWallet,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import type { FeatureIcon, PricingPlan } from "../lib/pricing-plans"

const featureIcons: Record<FeatureIcon, Icon> = {
  timer: IconStopwatch,
  "git-branch": IconGitBranch,
  shield: IconShield,
  globe: IconGlobe,
  cpu: IconCpu,
  "shield-ban": IconShieldOff,
  activity: IconChartLine,
  "circle-dollar-sign": IconCoins,
  gauge: IconGauge,
  wallet: IconWallet,
  users: IconUsers,
  snowflake: IconSnowflake,
  link: IconLink,
  "key-round": IconKey,
  "folder-sync": IconFolders,
  "shield-plus": IconShieldCheck,
  server: IconServer,
  clock: IconClock,
  headset: IconHeadset,
}

type PricingCardProps = {
  plan: PricingPlan
}

export default function PricingCard({ plan }: PricingCardProps) {
  return (
    <li
      className={cn(
        "flex min-w-0 flex-col border-border p-6",
        "border-b last:border-b-0 lg:row-span-7 lg:grid lg:grid-rows-subgrid lg:border-b-0 lg:border-r lg:last:border-r-0",
        plan.popular && "bg-muted/40"
      )}
    >
      <div className="flex items-center gap-2">
        <h3 className="text-sm font-medium text-foreground">{plan.name}</h3>
        {plan.popular ? (
          <span className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground">
            Popular
          </span>
        ) : null}
      </div>

      <p className="mt-4 flex items-baseline gap-1 lg:mt-0 lg:pt-4">
        <span className="text-4xl font-semibold tracking-tight text-foreground md:text-5xl">
          {plan.price}
        </span>
        {plan.priceSuffix ? (
          <span className="text-sm text-muted-foreground">
            {plan.priceSuffix}
          </span>
        ) : null}
      </p>

      <p className="mt-3 text-sm leading-relaxed text-muted-foreground lg:mt-0 lg:pt-3">
        {plan.description}
      </p>

      <div className="py-5" aria-hidden>
        <div className="h-px w-full bg-border" />
      </div>

      <p
        className={cn(
          "pb-4 text-sm text-muted-foreground",
          !plan.featuresIntro && "invisible"
        )}
      >
        {plan.featuresIntro ?? "Everything included:"}
      </p>

      <ul className="flex flex-col gap-3">
        {plan.features.map((feature) => {
          const Icon = featureIcons[feature.icon]
          return (
            <li
              key={feature.label}
              className="flex items-start gap-2.5 text-sm leading-relaxed text-foreground"
            >
              <Icon
                aria-hidden
                className="mt-0.5 size-4 shrink-0 text-foreground"
                stroke={1.5}
              />
              <span>{feature.label}</span>
            </li>
          )
        })}
      </ul>

      <div className="mt-auto pt-8">
        <Button
          size="lg"
          className="rounded-full px-5"
          variant={plan.ctaVariant}
        >
          {plan.ctaLabel}
        </Button>
      </div>
    </li>
  )
}
```

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

```ts
export type FeatureIcon =
  | "timer"
  | "git-branch"
  | "shield"
  | "globe"
  | "cpu"
  | "shield-ban"
  | "activity"
  | "circle-dollar-sign"
  | "gauge"
  | "wallet"
  | "users"
  | "snowflake"
  | "link"
  | "key-round"
  | "folder-sync"
  | "shield-plus"
  | "server"
  | "clock"
  | "headset"

export type PricingFeature = {
  icon: FeatureIcon
  label: string
}

export type PricingPlan = {
  id: "hobby" | "pro" | "enterprise"
  name: string
  description: string
  price: string
  priceSuffix?: string
  popular?: boolean
  featuresIntro?: string
  features: PricingFeature[]
  ctaLabel: string
  ctaVariant: "default" | "outline"
}

export const pricingPlans: PricingPlan[] = [
  {
    id: "hobby",
    name: "Hobby",
    description:
      "The perfect starting place for your web app or personal project.",
    price: "$0",
    priceSuffix: "/mo.",
    ctaLabel: "Get started free",
    ctaVariant: "outline",
    features: [
      { icon: "timer", label: "Unlimited personal workspaces" },
      { icon: "git-branch", label: "Version history for every project" },
      { icon: "shield", label: "Secure by default project links" },
      { icon: "globe", label: "Share previews with a public URL" },
      { icon: "cpu", label: "Core automation templates" },
      { icon: "shield-ban", label: "Spam and abuse filtering" },
      { icon: "activity", label: "Basic usage and activity charts" },
    ],
  },
  {
    id: "pro",
    name: "Pro",
    description: "Everything you need to build and scale your app.",
    price: "$20",
    priceSuffix: "/mo.",
    popular: true,
    featuresIntro: "Includes Hobby, plus:",
    ctaLabel: "Start Pro trial",
    ctaVariant: "default",
    features: [
      { icon: "circle-dollar-sign", label: "Included monthly credits" },
      {
        icon: "gauge",
        label: "Higher throughput on shared workloads",
      },
      { icon: "wallet", label: "Spend alerts before you overshoot" },
      {
        icon: "users",
        label: "Invite teammates with role-based access",
      },
      { icon: "snowflake", label: "Priority queue for heavy jobs" },
      { icon: "link", label: "Branded share links and domains" },
    ],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    description:
      "Critical security, performance, observability, platform SLAs, and support.",
    price: "Custom",
    featuresIntro: "Includes Pro, plus:",
    ctaLabel: "Talk to sales",
    ctaVariant: "outline",
    features: [
      { icon: "key-round", label: "Org-wide permission policies" },
      { icon: "folder-sync", label: "Directory sync for your IdP" },
      { icon: "shield-plus", label: "Custom security rule sets" },
      { icon: "server", label: "Isolated environments per region" },
      { icon: "clock", label: "Contracted response times" },
      { icon: "headset", label: "Named account support" },
    ],
  },
]
```