{"id":29131329,"url":"https://github.com/nani-samireddy/cue.js","last_synced_at":"2025-06-30T05:07:48.348Z","repository":{"id":294886444,"uuid":"988430866","full_name":"nani-samireddy/cue.js","owner":"nani-samireddy","description":"A lightweight, flexible, and beautifully designed JavaScript library for interactive product tours and feature walkthroughs. Guide your users with elegance and simplicity.","archived":false,"fork":false,"pushed_at":"2025-06-22T17:18:43.000Z","size":1036,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-28T16:09:59.305Z","etag":null,"topics":["js","js-library","npm-package"],"latest_commit_sha":null,"homepage":"https://cue-js.gitbook.io/docs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nani-samireddy.png","metadata":{"files":{"readme":"readme.MD","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-22T14:34:52.000Z","updated_at":"2025-06-22T17:18:47.000Z","dependencies_parsed_at":"2025-05-22T15:32:14.426Z","dependency_job_id":"78fc352e-2233-4093-9252-00bd9762c100","html_url":"https://github.com/nani-samireddy/cue.js","commit_stats":null,"previous_names":["nani-samireddy/cue.js"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nani-samireddy/cue.js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nani-samireddy%2Fcue.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nani-samireddy%2Fcue.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nani-samireddy%2Fcue.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nani-samireddy%2Fcue.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nani-samireddy","download_url":"https://codeload.github.com/nani-samireddy/cue.js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nani-samireddy%2Fcue.js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262714504,"owners_count":23352466,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js","js-library","npm-package"],"created_at":"2025-06-30T05:07:47.771Z","updated_at":"2025-06-30T05:07:48.328Z","avatar_url":"https://github.com/nani-samireddy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @nani_samireddy/cue.js\n\n[![npm version](https://img.shields.io/npm/v/@nani_samireddy/cue.js.svg)](https://www.npmjs.com/package/@nani_samireddy/cue.js)\n[![npm downloads](https://img.shields.io/npm/dm/@nani_samireddy/cue.js.svg)](https://www.npmjs.com/package/@nani_samireddy/cue.js)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![GitHub stars](https://img.shields.io/github/stars/nani-samireddy/cue.js?style=social)](https://github.com/nani-samireddy/cue.js/stargazers)\n\nA lightweight, flexible, and beautifully designed JavaScript library for interactive product tours and feature walkthroughs. Guide your users with elegance and simplicity.\n\n## ✨ Features\n\n* **Lightweight \u0026 No Dependencies:** Built with vanilla JavaScript, keeping your bundle size small.\n* **Declarative API:** Define your tours with simple, readable step configurations.\n* **Smart Positioning:** Tooltips intelligently adjust to stay within the viewport.\n* **Dynamic Content Support:** Guide users through elements that appear or change dynamically.\n* **Customizable:** Easily extendable with custom styling, callbacks, and element targeting.\n* **Event Hooks:** Integrate with analytics or trigger custom actions at various tour lifecycle points.\n* **Keyboard Navigation:** Accessible tour controls for a better user experience.\n\nLearn more about the features and how to use them in the [documentation](https://cue-js.gitbook.io/docs).\n\n## 📦 Table of Contents\n- [@nani\\_samireddy/cue.js](#nani_samireddycuejs)\n  - [✨ Features](#-features)\n  - [📦 Table of Contents](#-table-of-contents)\n  - [🚀 Installation](#-installation)\n    - [npm](#npm)\n    - [Yarn](#yarn)\n    - [CDN](#cdn)\n  - [💡 Usage](#-usage)\n    - [HTML Structure](#html-structure)\n    - [JavaScript](#javascript)\n  - [🎨 Styling](#-styling)\n  - [🤝 Contributing](#-contributing)\n  - [📄 License](#-license)\n\n---\n\n## 🚀 Installation\n\n### npm\n\nInstall the package using npm:\n\n```bash\nnpm install @nani_samireddy/cue.js\n````\n\n### Yarn\n\nInstall the package using Yarn:\n\n```bash\nyarn add @nani_samireddy/cue.js\n```\n\n### CDN\n\nYou can quickly include Cue.js in your project using a CDN (Content Delivery Network).\n\n**Minified Version (Recommended for Production):**\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@1.0.0/dist/cue.min.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@1.0.0/dist/cue.min.js\"\u003e\u003c/script\u003e\n```\n\n**Unminified Version (For Development/Debugging):**\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@1.0.0/dist/cue.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@nani_samireddy/cue.js@1.0.0/dist/cue.umd.js\"\u003e\u003c/script\u003e\n```\n\n*Note: Replace `1.0.0` with the latest version number available on npm/CDN.*\n\n-----\n\n## 💡 Usage\n\n### HTML Structure\n\nEnsure your HTML elements have unique IDs or accessible CSS classes for `Cue.js` to target.\n\n```html\n\u003cbutton id=\"start-tour-button\"\u003eStart Guided Tour\u003c/button\u003e\n\u003cdiv id=\"my-first-feature\"\u003e...\u003c/div\u003e\n\u003cspan class=\"important-setting\"\u003e...\u003c/span\u003e\n```\n\n### JavaScript\n\nIf you're using a module bundler (like Webpack, Vite, Parcel), import `Cue` like this:\n\n```javascript\nimport Cue from '@nani_samireddy/cue.js';\n\n// Also import the CSS. How this works depends on your bundler's configuration.\n// Common ways:\n// import '@nani_samireddy/cue.js/dist/cue.css'; // Or cue.min.css\n// import '@nani_samireddy/cue.js/style.css'; // If you've configured your bundler to look in src/ for 'style.css'\n```\n\nIf you're using the **CDN version** or **vanilla JavaScript**, `Cue` will be globally available as `window.Cue`.\n\n```javascript\ndocument.addEventListener('DOMContentLoaded', () =\u003e {\n    // Initialize Cue.js\n    const cue = new Cue({\n        // Global options (optional)\n        overlay: true,          // Show dimmed overlay (default: true)\n        showProgress: true,     // Show \"Step X of Y\" (default: false)\n        showBullets: true,      // Show navigation dots (default: false)\n        nextLabel: 'Continue',  // Custom button text\n        debug: true             // Enable console logging for development\n    });\n\n    const tourSteps = [\n        {\n            target: '#my-first-feature', // Required: CSS selector or DOM element\n            title: 'Welcome!',\n            content: 'This is the first feature you should explore.',\n            position: 'bottom' // Optional: 'top', 'bottom', 'left', 'right', 'center', 'auto'\n        },\n        {\n            target: '.important-setting',\n            title: 'Important Settings',\n            content: 'Don\\'t forget to customize your preferences here.',\n            position: 'left',\n            // Step-specific option overrides\n            showButtons: false, // Hide default buttons for this step\n            preStep: () =\u003e {\n                console.log('Preparing for the settings step...');\n                // You can show/hide elements or fetch data here.\n            },\n            postStep: () =\u003e {\n                console.log('Finished settings step.');\n            }\n        },\n        {\n            target: '#start-tour-button',\n            title: 'That\\'s it!',\n            content: 'You\\'re ready to start exploring. Click \"Done\" to finish the tour.',\n            position: 'top'\n        }\n    ];\n\n    cue.setSteps(tourSteps);\n\n    // Start the tour when a button is clicked\n    document.getElementById('start-tour-button').addEventListener('click', () =\u003e {\n        cue.start();\n    });\n\n    // --- Event Hooks (Optional) ---\n    cue.onStart(() =\u003e {\n        console.log('Tour started!');\n    });\n\n    cue.onChange((stepData, currentIndex) =\u003e {\n        console.log(`Moved to step ${currentIndex + 1}: ${stepData.title}`);\n        // Integrate with analytics: `trackEvent('Cue.js Tour Step', { step: currentIndex + 1, title: stepData.title });`\n    });\n\n    cue.onComplete(() =\u003e {\n        console.log('Tour completed! 🎉');\n        // Redirect, show a success message, etc.\n    });\n\n    cue.onExit((currentStepIndex) =\u003e {\n        console.log(`Tour exited at step ${currentStepIndex + 1}.`);\n    });\n});\n```\n\n-----\n\n## 🎨 Styling\n\nCue.js comes with beautiful, modern default styles. You can easily customize the look and feel using CSS variables:\n\n```css\n/* Custom styles in your own CSS file */\n:root {\n    --cue-primary-color: #6a0dad;      /* Deep Purple */\n    --cue-accent-color: #ff6f00;       /* Orange Accent */\n    --cue-bg-color: #f0f8ff;           /* Alice Blue background */\n    --cue-border-radius: 12px;         /* More rounded corners */\n    --cue-shadow-lg: 0 15px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow */\n}\n\n/* You can also override specific classes */\n.custom-cta-tooltip {\n    background-color: #4CAF50;\n    color: white;\n    border: none;\n    font-weight: bold;\n}\n.custom-cta-tooltip .cue-tooltip-title {\n    color: white;\n}\n.custom-cta-tooltip::before {\n    border-color: #4CAF50 transparent transparent transparent !important;\n}\n```\n\n-----\n\n## 🤝 Contributing\n\nWe welcome contributions to Cue.js\\! Please see our [CONTRIBUTING.md](./CONTRIBUTING.md) for more details.\n\n-----\n\n## 📄 License\n\nCue.js is [MIT licensed](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnani-samireddy%2Fcue.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnani-samireddy%2Fcue.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnani-samireddy%2Fcue.js/lists"}