Skip to content

Main Navigation Demo examples

Appearance

Sidebar Navigation

Overview

Installation

Initial Setup

React

Next.js App Router

Next.js Pages Router

Basic Usage

Native Popups

Generic

Confirm

Crop Image

Form

Form Fields Overview

Text Input

Textarea

Email Input

Number Input

Password Input

Checkbox

Radio Button

Select Dropdown

Date Input

Time Input

File Upload

Custom Form Components

HTML

Global Configuration

Popup Settings

Provider Props

Creating Custom Popups

Basic Structure & Props

Styling System

Register & Use

Complete Example

Hook API (useNtPopups)

Overview

Methods

Visual Customization (CSS)

CSS Variables (Theming)

CSS Classes & Structure

Responsive & Accessible

Responsive Design

Accessibility

Usage Examples & Patterns

Delete Confirmation

Avatar Upload & Crop

Feedback Form

Multi-Step Wizard

Loading Indicator

Onboarding Tour

Notification with Actions

Advanced Form Validation

Global Error Handler

Confirmation Hook

Toast Notifications

Best Practices

Recommendations

What to Avoid

Troubleshooting & FAQ

Popup Doesn't Open

Styles Not Applied

Form Doesn't Validate

Popup Won't Close

Next.js Hydration Error

TypeScript Errors

FAQ: TypeScript

FAQ: Dynamic Language

FAQ: Custom Fonts

FAQ: Nesting Popups

FAQ: Prevent Closing

Additional Resources

Contributing

Acknowledgments

License

On this page

📦 Installation

bash

npm install ntpopups

Or with Yarn:

bash

yarn add ntpopups

Pager

Previous pageOverview

Next pageInitial Setup

📦 Installation ​

📦 Installation