Prompt Dialog

popularity exchange marketplace

A customizable dialog for user input with validation.

Props

Prop	Type	Default	Description
title	string	Enter Value	The dialog title.
description	string	Please provide the requested information below.	The dialog description.
placeholder	string	Enter value...	Input placeholder text.
submitText	string	Submit	Text for the submit button.
onConfirm	(value: string) => void \| Promise<void>	() => {}	Callback fired when user submits
children	ReactNode	<Button variant='outline'>Open Prompt</Button>	The trigger button/element

Usage Examples

Destructive Action

import { PromptDialog } from "@/showcase/prompt-dialog";
export default function DestructiveExample() {
  return (
    <PromptDialog
      title="Delete Repository"
      description="Please type the repository name to confirm deletion."
      placeholder="e.g. my-awesome-repo"
      submitText="Delete"
      onConfirm={async (val) => {
        await new Promise(r => setTimeout(r, 1000));
        console.log("Deleted repo:", val);
      }}
    >
      <button className="px-4 py-2 bg-destructive text-destructive-foreground rounded-md font-medium">
        Delete Repository
      </button>
    </PromptDialog>
  );
}

Key Features

Form validation with Zod
Accessible keyboard navigation
Loading state during submission
Customizable triggers

PreviousTheme Toggle

NextStats Card