Follow on twitter
Docs
Combobox Dialog

Combobox Dialog

The Combobox Dialog is a ready-to-use component that combines the functionality of a dropdown list with a dialog interface. When activated, the dialog allows users to select an option from the combobox while also providing additional information or actions related to their selection. This interactive feature enhances user experience by streamlining choices and facilitating quick decision-making.

Title for Custom Dialog
The dialog is an interactive feature that presents content of custom dialog.

Installation

Copy & paste the following .

pnpm add next-shadcn

Usage

 
<ComboboxDialog
  	sectionClassName: "flex items-center justify-center p-10 min-h-[40vh] relative bg-cover bg-center bg-no-repeat bg-[url('/img.svg')]"
	cardClassName: "backdrop-blur-xl bg-white/30 border p-6 w-full sm:w-50 md:w-80 lg:w-96 h-auto dark:border-white dark:text-black"
	titleClassName: "font-bold text-xl"
	descriptionClassName: "pt-2"
	backgroundImage: "/img.svg"
	buttonColor: "bg-purple-800 text-white shadow hover:bg-purple-900"
	cardTitle: "Title for Custom Dialog"
	cardDescription: "The dialog is an interactive feature that presents content of custom dialog."  
	dialogTitle: "Title for Hover Dialog"
	dialogDescription: "The hover dialog is an interactive feature that presents content of dialog in hover."
	popoverTitle: "Title for Popover"
	popoverDescription: "The dialog is an interactive feature that presents content of popover."
	hoverButton: "Hover"
	dialogButton: "Open Dialog"
	closeButton: "close"
	triggerButton: "Trigger"
/>
Calendar DialogTiptap Dialog