Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

Profile Dialog

Translucent Surface

The translucent prop is additive, so you can opt into the glass treatment on dialog-like surfaces without changing their structure, focus management, or motion.

Custom Close Button

Origin UI Dialogs

Here are some of the dialog examples from the Origin UI documentation.

Hats off to the Origin UI team ❤️.

I just made them work with my setup.

Scrollable (native scrollbar)

Scrollable (custom scrollbar)

Scrollable (sticky header)

Scrollable (sticky footer)

Terms & Condition

Feedback

Rating

OTP Code

Invite Members

Card Details

This implementation requires the use of Maska

Checkout

This implementation requires the use of Maska

Change Plan

Edit Profile

Onboarding

Command Pallette Search

Description List

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

Divider

A horizontal line to separate content. Similiar to the Seperator component, but with items in the middle.