ntPopups Demo

Global Settings

Popup Theme

Language

The language updates default texts, errors, and native popup texts

"use client";
import { NtPopupProvider } from "ntpopups";
import "ntpopups/dist/styles.css"

export default function PopupContext({ children }) {

  return (
    <NtPopupProvider language={"en"} theme={"white"}>
        {children}
    </NtPopupProvider>
    )
}

"use client";
import { NtPopupProvider } from "ntpopups";
import "ntpopups/dist/styles.css"

export default function PopupContext({ children }) {

  return (
    <NtPopupProvider language={"en"} theme={"white"}>
        {children}
    </NtPopupProvider>
    )
}

Popup Examples

Click on the cards below to test several common popup use cases.

Confirm Deletion

confirm

Success

generic

Loading

generic

Crop Avatar (Circle)

crop_image

Crop Banner (16:4)

crop_image

Contact Form

form

Custom HTML

html

Logout Confirmation

confirm

Error Alert

generic

Custom: Buy Product

my_buy_popup

Important Notice

generic

Form: User Settings

form

Generic: Offer Popup

generic

Form: Service Appointment

form

Form: Address Registration

form

Generic: Accept Terms

generic

Form: Language Selection

form

Form: Quick Sign Up

form

Confirm: Finalize Purchase

confirm

Crop Article Image (4:3)

crop_image

Form: Configure Slug/URL

form

Form: Password Revalidation

form

Generic: Maintenance Notice

generic

Confirm: Cancel Subscription

confirm

Form: Multiple File Upload

form

Form: Send Feedback (Custom Rating)

form

Crop Image (Social Post 1:1)

crop_image

Generic: Billing Warning

generic

Confirm Deletion

confirm

Success

generic

Loading

generic

Crop Avatar (Circle)

crop_image

Crop Banner (16:4)

crop_image

Contact Form

form

Custom HTML

html

Logout Confirmation

confirm

Error Alert

generic

Custom: Buy Product

my_buy_popup

Important Notice

generic

Form: User Settings

form

Generic: Offer Popup

generic

Form: Service Appointment

form

Form: Address Registration

form

Generic: Accept Terms

generic

Form: Language Selection

form

Form: Quick Sign Up

form

Confirm: Finalize Purchase

confirm

Crop Article Image (4:3)

crop_image

Form: Configure Slug/URL

form

Form: Password Revalidation

form

Generic: Maintenance Notice

generic

Confirm: Cancel Subscription

confirm

Form: Multiple File Upload

form

Form: Send Feedback (Custom Rating)

form

Crop Image (Social Post 1:1)

crop_image

Generic: Billing Warning

generic

Confirm Deletion

confirm

Success

generic

Loading

generic

Crop Avatar (Circle)

crop_image

Crop Banner (16:4)

crop_image

Contact Form

form

Custom HTML

html

Logout Confirmation

confirm

Error Alert

generic

Custom: Buy Product

my_buy_popup

Important Notice

generic

Form: User Settings

form

Generic: Offer Popup

generic

Form: Service Appointment

form

Form: Address Registration

form

Generic: Accept Terms

generic

Form: Language Selection

form

Form: Quick Sign Up

form

Confirm: Finalize Purchase

confirm

Crop Article Image (4:3)

crop_image

Form: Configure Slug/URL

form

Form: Password Revalidation

form

Generic: Maintenance Notice

generic

Confirm: Cancel Subscription

confirm

Form: Multiple File Upload

form

Form: Send Feedback (Custom Rating)

form

Crop Image (Social Post 1:1)

crop_image

Generic: Billing Warning

generic

🎯 Popup Types

Explore and edit the different predefined popup types.

Generic Popup

Simple popup to display messages

Confirm Popup

Confirmation popup with actions

Form - Contact (Simple)

Example of simple pre-defined form

Crop Image

Image cropping

HTML Popup

Custom HTML content

Custom Popup

User profile (simple example)

Custom Popup

Buy product (complete example)

General Settings

Properties automatically available in all popup types (Including those you create!)

No ESC close

closeOnEscape: false

No closing on outside click

closeOnClickOutside: false

Auto-close in 5s

timeout: 5000

Requires action

requireAction: true

Replace open popup

keepLast: false

Overlay open popup

keepLast: true

Allow page scroll

allowPageBodyScroll: true

Interactive backdrop

interactiveBackdrop: true

No dark background

hiddenBackdrop: true

No footer

hiddenFooter: true

No header

hiddenHeader: true

No animation

disableAnimation: true

Max Width (400px)

maxWidth: '400px'

Min Width (100px)

minWidth: '100px'

Callback on Open

onOpen()

Callback on Close

onClose()

Dynamic Update

updatePopup() - Stopwatch

Dynamic Form Editor

Create, configure, and test complex form popups in real-time.

Main Properties (data)

Title

Icon

Done Label

Message

Form Components

Full Name (name) [text]

Country (country) [select]

#3 - Inline Group

City (city) [text]

State (state) [text]

Select a component on the left to edit its properties.