Dialog 💬

Hello, Interaction Designer! 🎨

The dialog module is your go-to for creating accessible and robust dialog windows (also known as modals). It handles all the tricky bits like focus trapping, ARIA attributes, and overlay behavior, so you can focus on making your dialogs look great! 🤩

It's like a well-behaved pop-up that plays by all the accessibility rules! правила (pravila - rules in Russian, for fun) 🧐

Features

• ✅ Accessible (ARIA attributes, focus management)
• 🚪 Modal and non-modal (though typically modal)
• 🎬 Can be animated with @ryvora/react-presence
• 🧩 Composable: Dialog.Trigger, Dialog.Portal, Dialog.Overlay, Dialog.Content, Dialog.Title, Dialog.Description, Dialog.Close

Basic Usage

import * as Dialog from '@ryvora/react-dialog';

function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button>Open Dialog</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay />
        <Dialog.Content>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>This is the description of the dialog.</Dialog.Description>
          <Dialog.Close asChild>
            <button aria-label="Close">X</button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

Time to make some delightful dialogs! ✨