shadcn.io is an independent project built on shadcn/ui
The title is Transfer Ownership. Four bullets say you lose admin access, the new owner gets control, billing changes, and the team is notified. Transfer does not run.
List the consequences when one sentence hides the cost. A multi-step handoff belongs in a Dialog. In Vue, Ark UI does not transfer the project.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<Button variant="outline">Open Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Transfer Ownership</AlertDialogTitle>
<AlertDialogDescription>
You are about to transfer ownership of this project to another user. This will:
</AlertDialogDescription>
</AlertDialogHeader>
<ul class="ms-4 flex list-disc flex-col gap-1 text-muted-foreground text-sm">
<li v-for="consequence in consequences" :key="consequence">
{{ consequence }}
</li>
</ul>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogClose :asChild="true">
<AlertDialogAction>Transfer</AlertDialogAction>
</AlertDialogClose>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>FAQ
Where does the list go?
Right after AlertDialogHeader, as a ul with list-disc, ms-4 and text-muted-foreground. AlertDialogDescription holds the lead-in sentence, which keeps the description short when it's announced.
How many consequences should I list?
Three to five short items. Past that people skim, and the list stops doing its job. If there's more to say, link to documentation instead.
How should I phrase each item?
Start each with a verb in the same form: Remove your admin access, Grant full control, Update billing information. Parallel, short items are faster to scan than sentences.
How are the items rendered?
They're a static array at module scope, mapped to li elements keyed by their text. Replace it with the real consequences of your action, or build the list from props.
API Reference
Alert Dialog
Sets asChild. The rest is on the Alert Dialog page.
Button
Sets variant="outline". The rest is on the Button page.
