# Frontend Vite Modals

> Vite admin Dialog, AlertDialog, detail modals, FAB create modal, info modals. Use when building modals, dialogs, or overlay UI in admin dashboards.

- Skill: `xmuhameed/frontend-vite-modals` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-vite-modals`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-vite-modals/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xmuhameed (https://skillmd.com/u/xmuhameed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xmuhameed/frontend-vite-modals

---


# Modals & Dialogs

## Radix Dialog (create/edit)

```tsx
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader><DialogTitle>Create Item</DialogTitle></DialogHeader>
    {/* form */}
    <DialogFooter>
      <Button onClick={() => setOpen(false)}>Cancel</Button>
      <Button onClick={handleSubmit}>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

Used for: inline CRUD on list pages (box-color, coupon), global `CreateOrderModal`.

## AlertDialog (destructive confirm)

```tsx
<AlertDialog open={!!deleteId}>
  <AlertDialogContent>
    <AlertDialogTitle>Delete?</AlertDialogTitle>
    <AlertDialogAction onClick={confirmDelete}>Delete</AlertDialogAction>
    <AlertDialogCancel>Cancel</AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>
```

## Detail Modals (read-only)

`OrderDetailsModal`, `ProductDetailsModal`, `LogDetailsModal`:
- Large scrollable `DialogContent`
- Fetch by ID when opened
- Cross-links to storefront via `VITE_FRONTEND_URL`
- Sub-modals for payment/delivery info

## Global FAB

`dashboard-layout.tsx` — floating `+` button opens `CreateOrderModal` for order handlers.

## Deep-Link Modal

```typescript
// URL ?orderId=123 → open OrderDetailsModal
// Closing removes param from URL
```

## Info Modals

Small explanatory dialogs: `PaymentMethodInfoModal`, `DateTimeInfoModal` — icon button triggers.

## Inline vs Dedicated Page

| Simple entity (colors, tags) | Dialog on list page |
| Complex entity (product, category) | Dedicated create/edit page |