@sahil5261/nudge-ui

v1.0.1

Published

17 days ago

Interactive CLI for Nudge UI - Scaffold, configure, and eject toast notifications in React, Next.js, and Vanilla JS

Downloads

179

0High
0Medium
0Low

sahil5261

toast toaster nudge nudge-ui notifications alert snackbar cli react nextjs tailwind ui

🔔 Nudge UI CLI (`nudge-ui`)

The ultimate interactive CLI & notification engine for modern web apps.
Scaffold, configure, customize, and eject production-grade toast notifications in seconds.

npx nudge-ui

👨‍💻 Creator & Maintainer

🌐 Live Interactive Playground

Explore, test, and customize toast notifications in real-time on the Nudge UI web playground:

👉 Launch Nudge UI Playground (https://nudgeui.vercel.app/)

🎨 Multi-Style Preview: Switch between Default, Minimal, Glassmorphism, Bordered, and Accent themes.
🌗 Theme Transitions: Test Light & Dark modes with live CSS/Tailwind code generation.
📋 One-Click Code Export: Copy production-ready React and Tailwind code directly to your clipboard.

⚡ Highlights

🚀 Zero Hassle Setup — Scaffold full toast notification infrastructure with a single interactive terminal command.
🎨 Dual Style Modes — Seamless support for both Tailwind CSS and Vanilla CSS (BEM).
📦 Zero External UI Dependencies — Self-contained SVG icons and clean observer engine.
🧩 100% Code Ownership (eject) — Eject complete source files directly into your codebase. No lock-in!
🌐 Framework Agnostic — Native support for Next.js (App Router/Pages), React Vite, CRA, and Vanilla JS.
🎯 Fully Typed — Written with strict TypeScript definitions for all options, types, and callbacks.

🚀 Quick Start

Run the interactive scaffolding wizard directly with npx without installing anything:

npx nudge-ui

or explicitly run the init command:

npx nudge-ui init

📦 Global Installation (Optional)

If you prefer having the CLI globally available across all your projects:

npm install -g nudge-ui

Then invoke anywhere:

nudge init

🛠️ CLI Commands & Flags

| Command | Description | Example | |---|---|---| | npx nudge-ui | Launch interactive setup wizard | npx nudge-ui | | npx nudge-ui init | Initialize Nudge UI in current project | npx nudge-ui init --style tailwind | | npx nudge-ui eject | Eject source code directly into project | npx nudge-ui eject | | npx nudge-ui list | View available components & presets | npx nudge-ui list | | npx nudge-ui add | Add specific components on demand | npx nudge-ui add ToastContainer |

Available `init` Flags:

npx nudge-ui init [options]

Options:
  -y, --yes          Skip prompts and use smart defaults
  -s, --style <type> Choose "tailwind" or "css" (default: auto-detected)
  -t, --typescript   Generate TypeScript (.ts/.tsx) templates
  -d, --dir <path>   Custom directory for components (default: components/toaster)
  -h, --help         Display help for command

💻 How to Use in Your Application

1. Add `ToastContainer` to your root layout / App:

// app/layout.tsx (Next.js App Router) or App.tsx (React Vite)
import { ToastContainer } from "@/components/toaster/ToastContainer";
// If using CSS mode:
// import "./toaster.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Renders the toast portal */}
        <ToastContainer />
      </body>
    </html>
  );
}

2. Trigger Toasts from anywhere:

import { toast } from "@/lib/toaster-core";

// Success Toast
toast.success("Profile updated successfully!");

// Error Toast
toast.error("Failed to save changes. Please try again.");

// Warning Toast
toast.warning("Your session will expire in 5 minutes.");

// Info Toast
toast.info("A new version is available for download.");

// Loading Async / Promise Toast
const toastId = toast.loading("Uploading documents...");
try {
  await uploadFiles();
  toast.update(toastId, {
    type: "success",
    message: "Documents uploaded successfully!",
    autoClose: true,
    duration: 3000,
  });
} catch (err) {
  toast.update(toastId, {
    type: "error",
    message: "Upload failed.",
    autoClose: true,
    duration: 4000,
  });
}

⚙️ Toast Configuration Options

toast.show("Custom Notification", {
  type: "success",          // "default" | "success" | "error" | "warning" | "info" | "loading" | "custom"
  position: "bottom-right", // "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center"
  duration: 4000,           // Duration in milliseconds (default: 4000)
  autoClose: true,          // Automatically dismiss after duration
  title: "Optional Title",  // Bold title above the message
  allowHtml: false,         // Render HTML content (sanitize first!)
  twClass: "border-2",      // Custom Tailwind utility classes
  className: "custom-toast",// Custom CSS class
  onClose: (t) => {         // Callback fired on dismiss
    console.log("Toast closed:", t.id);
  },
});

📤 How to Publish to NPM

Follow these 4 simple steps to publish your CLI package to npm:

# 1. Navigate to the CLI directory
cd nudge-cli # (or your CLI directory)

# 2. Log in to your npm account
npm login

# 3. Test pack dry-run
npm pack --dry-run

# 4. Publish to npm registry
npm publish --access public

🤝 Connect & Collaborate

Have questions, feedback, or ideas?

💼 LinkedIn: Sahil Gadhiya
🐙 GitHub: @sahilgadhiya
📦 NPM: @sahil5261
🌐 Web Playground: nudgeui.vercel.app

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

🔔 Nudge UI CLI (nudge-ui)