Dialog (Modal)

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

A modal dialog built on Headless UI's Dialog. Focus is trapped inside while open, page scrolling is locked, and Escape or a click outside closes it:

import { Button, Dialog, DialogActions, DialogDescription, DialogTitle } from '@vinui/react';

<Dialog open={open} onClose={() => setOpen(false)} role="alertdialog" size="sm">
  <DialogTitle>Delete project?</DialogTitle>
  <DialogDescription>This can’t be undone.</DialogDescription>
  <DialogActions>
    <Button variant="secondary" onClick={() => setOpen(false)} autoFocus>
      Cancel
    </Button>
    <Button onClick={deleteProject}>Delete</Button>
  </DialogActions>
</Dialog>;

• Sizes are sm, md (default) and lg; dialogs are full-width on small screens.
• DialogTitle and DialogDescription label the dialog for screen readers. Put other content in DialogBody.
• DialogActions right-aligns buttons, stacking them on small screens with the last (primary) on top.
• Put autoFocus on the element to focus first; use role="alertdialog" for confirmations.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.