⚡Vibe Coding

Modale Dialoge richtig bauen

Dialoge die Nutzer nicht nerven

Modals sind ueberall: Bestaetigung, Formulare, Details-Ansicht. Aber die meisten sind schlecht gebaut. Mit Shadcn Dialog und ein paar Regeln baust du Modals die barrierefrei, responsive und benutzerfreundlich sind.

Pro-Tip — Der schnelle Weg
Nutze Modals nur wenn der Nutzer eine Entscheidung treffen MUSS. Fuer alles andere sind Sheets (Seitenleisten) oder Inline-Expansion besser.
Seite 1
1

Shadcn Dialog installieren

Die Dialog-Komponente basiert auf Radix UI und ist standardmaessig barrierefrei. Focus-Trap, Escape-Taste und Overlay-Klick sind eingebaut.

npx shadcn@latest add dialog
2

Einfachen Dialog bauen

Nutze DialogTrigger fuer den Oeffnen-Button und DialogContent fuer den Inhalt. DialogHeader und DialogFooter strukturieren den Aufbau.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'


<Dialog>
 <DialogTrigger asChild>
 <Button>Loeschen</Button>
 </DialogTrigger>
 <DialogContent>
 <DialogHeader>
 <DialogTitle>Bist du sicher?</DialogTitle>
 </DialogHeader>
 <p>Diese Aktion kann nicht rueckgaengig gemacht werden.</p>
 <DialogFooter>
 <Button variant='destructive'>Ja, loeschen</Button>
 </DialogFooter>
 </DialogContent>
</Dialog>
3

Controlled Dialog

Steuere den Dialog ueber State wenn du ihn programmatisch oeffnen oder schliessen willst. Zum Beispiel nach einem erfolgreichen API-Call.

const [open, setOpen] = useState(false)


<Dialog open={open} onOpenChange={setOpen}>
 {/* ... */}
</Dialog>


// Nach API-Call:
await saveData()
setOpen(false)
4

Formulare im Dialog

Fuer Formulare im Dialog nutze DialogContent mit einer Form. Validiere vor dem Schliessen und zeige Fehler inline an. Schliesse den Dialog nur bei Erfolg.

5

Mobile Sheets statt Modals

Auf Mobile sind Sheets besser als Modals. Nutze die Sheet-Komponente die von unten hoch-slidet. Auf Desktop bleibt es ein zentrierter Dialog.

npx shadcn@latest add sheet
// Sheet fuer Mobile, Dialog fuer Desktop
// Oder: responsive Dialog der auf Mobile zum Sheet wird
Seite 2
Warum das funktioniert
  • Radix-basierte Dialoge sind automatisch barrierefrei
  • Focus-Trap haelt den Nutzer im Kontext der aktuellen Aktion
  • Controlled State erlaubt programmatisches Schliessen nach Aktionen
  • Sheet-Pattern auf Mobile fuehlt sich nativer an als zentrierte Modals
Tipps
  • Maximal eine Aktion pro Dialog, sonst wird es unuebersichtlich
  • DialogDescription ist wichtig fuer Screenreader
  • Vermeide verschachtelte Dialoge, das verwirrt Nutzer
  • Animationen dezent halten, schnelles Oeffnen ist wichtiger als huebsch
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen