Skip to content
Get Pro
Overlays

Dialog

A confirm dialog that rises 8px into place.

$149 once · every Pro piece

Customize

When it must be answered, Escape and a scrim click are refused: the panel bumps and its fill lifts once. Under 480px it becomes a bottom sheet with stacked buttons.

Install

npx shadcn@latest add @obsyde/dialog

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Dialog } from '@/components/obsyde/ember/dialog/Dialog';

export function Example() {
  return (
    <Dialog
      title="Discard changes?"
      description="Anything you have not saved will be lost."
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/dialog/Dialog.tsxcomponent
  • ember/dialog/dialog.cssstyles
  • ember/dialog/DialogDemo.tsxdemo
  • ember/overlays-kit/demo.cssshared
  • ember/overlays-kit/kit.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
titleTitlestring'Discard changes?'
descriptionDescriptionstring'Anything you have not saved…'
confirmLabelConfirm labelstring'Discard'
cancelLabelCancel labelstring'Cancel'
toneTone'default' | 'danger''default'
dismissibleDismissiblebooleantrue