Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Plan Selection Dialog for Vue

A plan dialog with Hobby at $0, Pro at $29, and Enterprise at $99. Pro starts selected, and the button reads Continue with Pro.

UI library: Ark UI

Choose Plan opens three cards: Hobby at $0, Pro at $29, and Enterprise at $99. Pro starts selected. The same six features sit under every card. The button reads Continue with Pro, and Cancel is beside it.

Use it for a quick plan switch. If the lists differ, swap them with the selection. A change that cannot be undone belongs in an Alert Dialog. In Vue, Ark UI does not change the plan.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dialog anatomy: content, title, description, close, footer

Usage

<Dialog>
  <DialogTrigger :asChild="true">
    <Button variant="outline">Choose Plan</Button>
  </DialogTrigger>
  <DialogContent class="sm:max-w-lg">
    <DialogHeader>
      <DialogTitle>Choose your plan</DialogTitle>
      <DialogDescription>
        Select the plan that best fits your needs.
      </DialogDescription>
    </DialogHeader>
    <RadioGroup
      aria-label="Plan"
      class="sm:grid-cols-3"
      @value-change="handleValueChange"
      :value="selectedPlan"
    >
      <FieldLabel v-for="plan in plans" :key="plan.value">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>{{ plan.name }}</FieldTitle>
            <span class="font-bold text-lg">{{ plan.price }}</span>
            <FieldDescription class="text-xs">
              {{ plan.description }}
            </FieldDescription>
          </FieldContent>
          <RadioGroupItem :value="plan.value" />
        </Field>
      </FieldLabel>
    </RadioGroup>
    <div class="flex flex-col gap-2">
<!-- The rest of the file is under Installation. -->

FAQ

How are the plan cards built?

Each is a FieldLabel around a horizontal Field with the name, price, description and a RadioGroupItem. The radio group is controlled, starts on Pro, and lays the cards out with sm:grid-cols-3.

How does the button know the plan?

It looks up the selected value in the static plans list and shows its name: Continue with Pro.

Should the features change with the plan?

If plans differ, yes: keep a feature list per plan and show the selected one's, or mark features missing from it.

Can I add a monthly or yearly toggle?

Yes, with a Switch or a second radio group above the cards that changes the prices, as the Checkout dialog example does.

Does Continue close the dialog?

Cancel is a DialogClose, so it does. Continue doesn't; close the dialog from your handler. Bind v-model:open.

API Reference

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Radio Group

Sets aria-label="Plan", value-change="handleValueChange", value="selectedPlan" and value="plan.value". The rest is on the Radio Group page.

Field

Sets v-for="plan in plans", key="plan.value" and orientation="horizontal". The rest is on the Field page.

All 17 dialog examples