Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Layout·@exepert/ui / Dialog

Dialog

A focused modal surface for decisions that need the user’s attention.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

Confirmation

A destructive decision explains its consequence.

Open in Playground ↗
Starting preview…
import { Button, Dialog } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <Dialog open onOpenChange={() => {}} title="Delete workspace?" description="This removes saved runs and cannot be undone."><Button variant="danger">Delete workspace</Button></Dialog>
  );
}

Usage

Keep the task small, make the escape path clear, and avoid stacking dialogs.

Props

  • open: boolean
  • onOpenChange: function
  • title: ReactNode
  • description: ReactNode
  • footer: ReactNode

Accessibility

  • Moves focus into the dialog while open.
  • Use a labelled title and keep background content inert.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { Dialog } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.