Follow on twitter
Docs
Accordion Dialog

Accordion Dialog

The Accordion Dialog is a ready-to-use component that seamlessly integrates an accordion feature within a dialog box. When the dialog is opened, the accordion expands to reveal its contents, providing an organized and interactive way to display information.

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

Installation

Install the following dependencies.

npm install next-shadcn

Usage

<AccordionDialog 
	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"
	/>
Form DialogCalendar Dialog