# Pricing 11

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

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

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/pricing-11.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: `lucide-react`
- Registry items: `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`

## Files

### `pricing.tsx`

```tsx
"use client"

import { FancyButton } from "@/components/ui/fancy-button"
import { ArrowUpRightIcon, CheckIcon } from 'lucide-react'

type PricingPlan = {
  label: string
  description: string
  price: number
  period: string
  taxNote: string
  features: string[]
  highlighted?: boolean
}

const plan: PricingPlan = {
  label: "Startup Plan",
  description: "For experienced developers and small teams.",
  price: 399,
  period: "one-time payment",
  taxNote: "plus local taxes",
  features: [
    "5 users license",
    "Access to all components",
    "Lifetime access",
    "Unlimited projects",
    "Customer supports",
    "Free updates",
  ],
  highlighted: true,
}

export function Pricing() {
  return (
    <section
      aria-label="Pricing"
      className="mx-auto flex w-full max-w-sm flex-col items-center justify-center"
    >
      <PricingCard plan={plan} />
    </section>
  )
}

function PricingCard({ plan }: { plan: PricingPlan }) {
  return (
    <div className="relative flex w-full flex-col pt-8">
      {plan.highlighted && (
        <div className="absolute top-0 left-0 flex h-12 items-start rounded-t-3xl border border-border/50 bg-primary px-5 pt-2 pb-12 text-sm font-medium tracking-wide text-primary-foreground">
          Most Popular
        </div>
      )}

      <div className="relative z-10 flex flex-col gap-6 rounded-4xl bg-card p-8 shadow-elevated-lg">
        <div className="flex flex-col gap-2">
          <h3 className="text-xl font-medium text-foreground">{plan.label}</h3>
          <p className="text-sm leading-relaxed text-muted-foreground">
            {plan.description}
          </p>
        </div>

        <div className="h-px bg-border/50" />

        <div className="flex items-center gap-4">
          <span className="text-6xl font-semibold tracking-tight text-foreground">
            ${plan.price}
          </span>
          <div className="flex flex-col justify-center">
            <span className="text-sm font-medium text-foreground">
              {plan.period}
            </span>
            <span className="text-sm text-muted-foreground">
              {plan.taxNote}
            </span>
          </div>
        </div>

        <FancyButton size="lg" className="w-full gap-2 text-base font-medium">
          Buy now
          <ArrowUpRightIcon  data-icon="inline-end" />
        </FancyButton>

        <ul className="flex flex-col gap-3">
          {plan.features.map((feature) => (
            <li key={feature} className="flex items-start gap-3">
              <div className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary">
                <CheckIcon  className="size-3 text-primary-foreground" />
              </div>
              <span className="text-sm text-muted-foreground">{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
```