Dialog — Frontfriend

Interactive preview

Built on Reka UI. Component colors, typography and styling come from your Design System.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

npx frontfriend download dialog -f vue --primitive reka --registry v4

Review dependencies reported by the downloader and keep your source changes in version control.

Usage & composition

Reka uses Vue slots and bindings. Use as-child for trigger composition and v-model:open for a controlled dialog. React JSX examples are not interchangeable with Vue templates.

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import {
  Dialog, DialogTrigger, DialogContent, DialogBody,
  DialogHeader, DialogTitle, DialogDescription,
  DialogFooter, DialogClose,
} from '@/components/ui/dialog';
</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button>Start something new</Button>
    </DialogTrigger>
    <DialogContent :show-close-button="false">
      <DialogHeader>
        <DialogTitle>A fresh start.</DialogTitle>
        <DialogDescription>Your next chapter begins here.</DialogDescription>
      </DialogHeader>
      <DialogBody><p>Build from the foundations you know.</p></DialogBody>
      <DialogFooter>
        <DialogClose as-child>
          <Button variant="outline">Got it</Button>
        </DialogClose>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

Controlled dialogs

Use v-model:open on Dialog. Close only after a successful asynchronous action. Preserve the user’s input when validation fails.

Keep the title and description in the dialog composition. A complex form may need explicit initial focus and an associated error summary; test it in your application.

API reference

Frontfriend-owned props and selected target integration points. Native HTML and inherited primitive props remain documented by Reka UI.

Prop / part	Type	Default	Purpose
`v-model:open`	boolean	`—`	Control the root’s open state.
`DialogContent.width`	xs \| sm \| md \| lg \| 3xl \| 5xl \| full \| fit	`md`	Select a configured modal width.
`DialogContent.height`	auto \| full	`—`	Select a configured height.
`DialogContent.showCloseButton`	boolean	`true`	Include the configured close button.
`DialogContent.closeOnOutside`	boolean	`true`	Allow outside interaction to dismiss.
`DialogBody.noPadding`	boolean	`false`	Select the unpadded content treatment.
`DialogFooter.align`	end \| justify \| start \| stretch	`end`	Choose configured action alignment.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.

Accessibility

Include an accessible title and a useful description.
Check initial focus, focus containment and focus restoration.
Test Escape and outside dismissal in the real product context.
Use an alert dialog for decisions that require explicit acknowledgement; do not silently change a dialog’s role.