React Dialog Block Select Plan

Select plan dialog with pricing tiers, feature comparison, billing toggle, and plan selection for subscription flows

Looking to implement shadcn/ui blocks?

Join our Discord community for help from other developers.

Choose subscription plans with clear pricing comparison. This React select plan dialog provides multiple pricing tiers with feature highlights, monthly and annual billing toggle with savings display, feature comparison between plans, and seamless plan selection flow. Built with shadcn/ui Dialog, Card, Button, Switch, Badge, and RadioGroup components using Tailwind CSS, users compare and select plans confidently. Compare features, toggle billing, select plan—perfect for SaaS applications, subscription services, freemium upgrades, or any Next.js application with tiered pricing requiring in-app plan selection.

"use client";

import { useState } from "react";
import { CreditCard, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { cn } from "@/lib/utils";

const plans = [
  { id: "free", name: "Free", price: 0, features: "3 projects, 1 GB storage" },
  { id: "pro", name: "Pro", price: 29, features: "Unlimited projects, 25 GB", popular: true },
  { id: "team", name: "Team", price: 79, features: "Everything in Pro + SSO" },
];

export const title = "React Dialog Block Select Plan";

export default function DialogSelectPlan() {
  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState("pro");
  const [isLoading, setIsLoading] = useState(false);

  const handleSelect = async () => {
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    setIsLoading(false);
    setOpen(false);
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <div className="flex min-h-[350px] items-center justify-center">
        <DialogTrigger asChild>
          <Button variant="outline">
            <CreditCard className="mr-2 h-4 w-4" />
            Change Plan
          </Button>
        </DialogTrigger>
      </div>
      <DialogContent className="sm:max-w-sm">
        <DialogHeader>
          <DialogTitle>Choose a Plan</DialogTitle>
          <DialogDescription>
            Select the plan that fits your needs.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-2 py-4">
          {plans.map((plan) => (
            <button
              key={plan.id}
              onClick={() => setSelected(plan.id)}
              className={cn(
                "w-full flex items-center justify-between rounded-lg border p-3 text-left transition-colors",
                selected === plan.id
                  ? "border-primary bg-primary/5"
                  : "hover:bg-muted"
              )}
            >
              <div>
                <div className="flex items-center gap-2">
                  <span className="text-sm font-medium">{plan.name}</span>
                  {plan.popular && (
                    <Badge variant="secondary" className="text-xs">
                      Popular
                    </Badge>
                  )}
                </div>
                <p className="text-xs text-muted-foreground">{plan.features}</p>
              </div>
              <span className="text-sm font-semibold">
                {plan.price === 0 ? "Free" : `$${plan.price}/mo`}
              </span>
            </button>
          ))}
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button onClick={handleSelect} disabled={isLoading}>
            {isLoading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Updating...
              </>
            ) : (
              "Confirm"
            )}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";import { useState } from "react";import { CreditCard, Loader2 } from "lucide-react";import { Button } from "@/components/ui/button";import { Badge } from "@/components/ui/badge";import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog";import { cn } from "@/lib/utils";const plans = [  { id: "free", name: "Free", price: 0, features: "3 projects, 1 GB storage" },  { id: "pro", name: "Pro", price: 29, features: "Unlimited projects, 25 GB", popular: true },  { id: "team", name: "Team", price: 79, features: "Everything in Pro + SSO" },];export const title = "React Dialog Block Select Plan";export default function DialogSelectPlan() {  const [open, setOpen] = useState(false);  const [selected, setSelected] = useState("pro");  const [isLoading, setIsLoading] = useState(false);  const handleSelect = async () => {    setIsLoading(true);    await new Promise((resolve) => setTimeout(resolve, 1000));    setIsLoading(false);    setOpen(false);  };  return (    <Dialog open={open} onOpenChange={setOpen}>      <div className="flex min-h-[350px] items-center justify-center">        <DialogTrigger asChild>          <Button variant="outline">            <CreditCard className="mr-2 h-4 w-4" />            Change Plan          </Button>        </DialogTrigger>      </div>      <DialogContent className="sm:max-w-sm">        <DialogHeader>          <DialogTitle>Choose a Plan</DialogTitle>          <DialogDescription>            Select the plan that fits your needs.          </DialogDescription>        </DialogHeader>        <div className="space-y-2 py-4">          {plans.map((plan) => (            <button              key={plan.id}              onClick={() => setSelected(plan.id)}              className={cn(                "w-full flex items-center justify-between rounded-lg border p-3 text-left transition-colors",                selected === plan.id                  ? "border-primary bg-primary/5"                  : "hover:bg-muted"              )}            >              <div>                <div className="flex items-center gap-2">                  <span className="text-sm font-medium">{plan.name}</span>                  {plan.popular && (                    <Badge variant="secondary" className="text-xs">                      Popular                    </Badge>                  )}                </div>                <p className="text-xs text-muted-foreground">{plan.features}</p>              </div>              <span className="text-sm font-semibold">                {plan.price === 0 ? "Free" : `$${plan.price}/mo`}              </span>            </button>          ))}        </div>        <DialogFooter>          <Button variant="outline" onClick={() => setOpen(false)}>            Cancel          </Button>          <Button onClick={handleSelect} disabled={isLoading}>            {isLoading ? (              <>                <Loader2 className="mr-2 h-4 w-4 animate-spin" />                Updating...              </>            ) : (              "Confirm"            )}          </Button>        </DialogFooter>      </DialogContent>    </Dialog>  );}

Pro membership required for block code

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-select-plan.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-select-plan.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-select-plan.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-select-plan.json

Pro block — Sign in to install

React Dialog Block Upgrade Plan

Upgrade prompts

React Dialog Block Payment Method

Payment flow

React Dialog Block Billing Address

Billing info

React Dialog Block Cancel Subscription

Cancellation

React Dialog Block Success Confirmation

Plan selected

React Dialog Block Feature Request

Missing features

Questions you might have

"use client"; import { useState } from "react"; import { CreditCard, Loader2 } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; const plans = [ { id: "free", name: "Free", price: 0, features: "3 projects, 1 GB storage" }, { id: "pro", name: "Pro", price: 29, features: "Unlimited projects, 25 GB", popular: true }, { id: "team", name: "Team", price: 79, features: "Everything in Pro + SSO" }, ]; export const title = "React Dialog Block Select Plan"; export default function DialogSelectPlan() { const [open, setOpen] = useState(false); const [selected, setSelected] = useState("pro"); const [isLoading, setIsLoading] = useState(false); const handleSelect = async () => { setIsLoading(true); await new Promise((resolve) => setTimeout(resolve, 1000)); setIsLoading(false); setOpen(false); }; return ( <Dialog open={open} onOpenChange={setOpen}> <div className="flex min-h-[350px] items-center justify-center"> <DialogTrigger asChild> <Button variant="outline"> <CreditCard className="mr-2 h-4 w-4" /> Change Plan </Button> </DialogTrigger> </div> <DialogContent className="sm:max-w-sm"> <DialogHeader> <DialogTitle>Choose a Plan</DialogTitle> <DialogDescription> Select the plan that fits your needs. </DialogDescription> </DialogHeader> <div className="space-y-2 py-4"> {plans.map((plan) => ( <button key={plan.id} onClick={() => setSelected(plan.id)} className={cn( "w-full flex items-center justify-between rounded-lg border p-3 text-left transition-colors", selected === plan.id ? "border-primary bg-primary/5" : "hover:bg-muted" )} > <div> <div className="flex items-center gap-2"> <span className="text-sm font-medium">{plan.name}</span> {plan.popular && ( <Badge variant="secondary" className="text-xs"> Popular </Badge> )} </div> <p className="text-xs text-muted-foreground">{plan.features}</p> </div> <span className="text-sm font-semibold"> {plan.price === 0 ? "Free" : `$${plan.price}/mo`} </span> </button> ))} </div> <DialogFooter> <Button variant="outline" onClick={() => setOpen(false)}> Cancel </Button> <Button onClick={handleSelect} disabled={isLoading}> {isLoading ? ( <> <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Updating... </> ) : ( "Confirm" )} </Button> </DialogFooter> </DialogContent> </Dialog> ); }

React Dialog Block Select Plan

Installation

Related blocks you will also like

React Dialog Block Upgrade Plan

React Dialog Block Payment Method

React Dialog Block Billing Address

React Dialog Block Cancel Subscription

React Dialog Block Success Confirmation

React Dialog Block Feature Request

Questions you might have

How many plans should I show?

Should I show monthly and annual?

How do I display features?

How do I show current plan?

Should I include enterprise?

Should I mention trials?