[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-105449":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":13,"forks30d":13,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":10,"trendingCount":13,"starSnapshotCount":13,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},105449,"notch-toast","Devsethi3\u002Fnotch-toast","Devsethi3","React toast library for smooth morphing notch or floating surface.","https:\u002F\u002Fnotch.devsethi.me",null,"TypeScript",56,0,51,4,12,46.4,"MIT License",false,"main",true,[],"2026-11-01 00:17:02","\u003Cdiv align=\"center\">\n  \u003Cimg src=\"public\u002Flogo.svg\" alt=\"Notch Toast Logo\" width=\"120\" height=\"120\" \u002F>\n\n# Notch Toast\n\nAn open-source React toast library that turns notifications into a polished, morphing notch or floating surface.\n\n[![Live Demo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLive_Demo-Visit_Site-black?style=for-the-badge)](https:\u002F\u002Fnotch.devsethi.me)\n[![GitHub Stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FDevsethi3\u002Fnotch-toast?style=for-the-badge&logo=github&color=yellow)](https:\u002F\u002Fgithub.com\u002FDevsethi3\u002Fnotch-toast)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg?style=for-the-badge)](.\u002FLICENSE)\n[![Contributor Covenant](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FContributor%20Covenant-2.1-4baaaa.svg?style=for-the-badge)](.\u002FCODE_OF_CONDUCT.md)\n\n  \u003Cbr \u002F>\n\n\u003C!-- [Features](#features) • [Quick Start](#quick-start) • [API](#api) • [Contributing](#contributing) • [License](#license) -->\n\n\u003Cimg src=\"public\u002Fog-image.png\" alt=\"Notch Toast React notification preview\" width=\"750\" \u002F>\n\n---\n\n\u003C\u002Fdiv>\n\n## Overview\n\nNotch Toast is a lightweight, client-side notification system for React. It\nrenders one focused toast at a time, morphs updates in place, and supports a\nnotch attached to the viewport edge or a floating notification surface.\n\nIt is built for apps that want a deliberate, polished notification experience\nwithout a queue of competing messages.\n\n## Features\n\n- Six toast types: default, success, error, warning, info, and loading.\n- Morphing updates for a single active notification.\n- Promise lifecycle notifications.\n- Attached notch and floating display modes.\n- Top-center and bottom-center placement.\n- Five motion presets plus reduced-motion support.\n- Optional action and dismiss controls.\n- Accessible live-region announcements and Escape-key dismissal.\n- TypeScript types, React 18\u002F19 support, and Motion peer compatibility.\n- shadcn registry and coding-agent skill installation paths.\n\n## Quick start\n\n### Install\n\nInstall the package and its Motion peer dependency:\n\n```bash\nnpm install notch-toast motion\n```\n\n```bash\npnpm add notch-toast motion\n```\n\n### Mount one toaster\n\nMount `NotchToaster` once near the application root. It is a client component\nthat can safely be rendered from a Next.js layout.\n\n```tsx\nimport { NotchToaster } from \"notch-toast\"\n\nexport default function RootLayout({\n  children,\n}: Readonly\u003C{ children: React.ReactNode }>) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>\n        {children}\n        \u003CNotchToaster \u002F>\n      \u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  )\n}\n```\n\nNo separate stylesheet import is required: the package includes the styles used\nby the toaster.\n\n### Trigger a toast\n\nTrigger toasts from a client component or other browser-side code:\n\n```tsx\n\"use client\"\n\nimport { toast } from \"notch-toast\"\n\nexport function SaveButton() {\n  return (\n    \u003Cbutton onClick={() => toast.success(\"Changes saved\")}>Save changes\u003C\u002Fbutton>\n  )\n}\n```\n\n## Usage\n\n### Toast types\n\n```tsx\ntoast(\"A new notification\")\ntoast.success(\"Profile updated\")\ntoast.info(\"New version available\")\ntoast.warning(\"Your session expires soon\")\ntoast.error(\"Unable to save changes\")\ntoast.loading(\"Uploading file\")\n```\n\n| Type      | Default duration | Dismissible by default |\n| --------- | ---------------: | :--------------------: |\n| `default` |          3600 ms |           No           |\n| `success` |          3600 ms |           No           |\n| `info`    |          3600 ms |           No           |\n| `warning` |       Persistent |          Yes           |\n| `error`   |       Persistent |          Yes           |\n| `loading` |       Persistent |          Yes           |\n\nSet `duration: 0` to keep any toast visible until it is dismissed or updated.\n\n### Options and actions\n\n```tsx\ntoast.error(\"Could not save your changes\", {\n  duration: 0,\n  dismissible: true,\n  action: {\n    label: \"Retry\",\n    onClick: retrySave,\n  },\n})\n```\n\n| Option        | Type                 | Description                                                                         |\n| ------------- | -------------------- | ----------------------------------------------------------------------------------- |\n| `id`          | `string`             | A stable ID for updating or dismissing a toast.                                     |\n| `duration`    | `number`             | Time in milliseconds before dismissal; `0` keeps it open.                           |\n| `dismissible` | `boolean`            | Shows the close control. Defaults to `true` for error, warning, and loading toasts. |\n| `action`      | `{ label, onClick }` | Adds an action button to the toast.                                                 |\n\n### Update or dismiss\n\nNotch Toast intentionally displays the latest notification. Reuse an ID to\nmorph the current notification in place.\n\n```tsx\nconst id = toast.loading(\"Saving settings\", { id: \"save-settings\" })\n\ntoast.update(id, {\n  title: \"Settings saved\",\n  type: \"success\",\n  duration: 3600,\n  dismissible: false,\n})\n\ntoast.dismiss(id)\n\u002F\u002F Or dismiss whichever toast is active:\ntoast.dismiss()\n```\n\n### Promise states\n\n`toast.promise` displays a loading state and replaces it only if it is still\nthe active toast when the promise settles.\n\n```tsx\nawait toast.promise(saveSettings(), {\n  loading: \"Saving settings\",\n  success: \"Settings saved\",\n  error: (reason) =>\n    reason instanceof Error ? reason.message : \"Unable to save settings\",\n})\n```\n\n### Configure the toaster\n\n```tsx\n\u003CNotchToaster position=\"bottom-center\" mode=\"floating\" animation=\"smooth\" \u002F>\n```\n\n| Prop        | Values                                         | Default      |\n| ----------- | ---------------------------------------------- | ------------ |\n| `position`  | `top-center`, `bottom-center`                  | `top-center` |\n| `mode`      | `attached`, `floating`                         | `attached`   |\n| `animation` | `fluid`, `gooey`, `smooth`, `subtle`, `snappy` | `fluid`      |\n\nMount exactly one `NotchToaster` per app. The component uses a singleton,\nlatest-toast-wins store.\n\n## Accessibility\n\nStatus messages are announced through live regions without moving focus.\nErrors use an assertive announcement; other toast types use polite\nannouncements. Dismissible toasts can be closed with their close button or the\nEscape key, except while focus is inside an editable control. Reduced-motion\npreferences keep a brief opacity transition while removing movement.\n\n## shadcn\u002Fui\n\nInstall the thin local wrapper in `components\u002Fui`. The registry handles the\npackage and Motion dependency:\n\n```bash\nnpx shadcn@latest add https:\u002F\u002Fnotch.devsethi.me\u002Fr\u002Fnotch-toaster.json\n```\n\nThen mount the generated `NotchToaster` once and use `notchToast` from the\ngenerated component.\n\n## AI agents and skills\n\nInstall the bundled agent guidance from the skills registry:\n\n```bash\nnpx skills add Devsethi3\u002Fnotch-toast\n```\n\nOr install the guidance directly from the package:\n\n```bash\nnpx notch-toast add-skill\nnpx notch-toast add-skill --agents\nnpx notch-toast add-skill --dir .cursor\u002Fskills\u002Fnotch-toast\n```\n\nThe full guidance is available at [agents.md](https:\u002F\u002Fnotch.devsethi.me\u002Fagents.md).\n\n## Documentation and support\n\n- [Documentation](https:\u002F\u002Fnotch.devsethi.me\u002Fdocs)\n- [Changelog](https:\u002F\u002Fnotch.devsethi.me\u002Fchangelog)\n- [Report a bug or request a feature](https:\u002F\u002Fgithub.com\u002FDevsethi3\u002Fnotch-toast\u002Fissues)\n- [Security policy](.\u002FSECURITY.md)\n\n## Development\n\n### Prerequisites\n\n- Node.js 20 or later\n- pnpm 9 or later\n\n### Run the project\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FDevsethi3\u002Fnotch-toast.git\ncd notch-toast\npnpm install\npnpm dev\n```\n\n### Useful commands\n\n```bash\npnpm typecheck       # Check the site and workspace TypeScript\npnpm lint            # Run ESLint\npnpm test            # Run package unit tests\npnpm test:package    # Run unit and consumer smoke tests\npnpm build           # Create the production site build\npnpm --filter .\u002Fpackages\u002Fnotch-toast run build\npnpm --filter .\u002Fpackages\u002Fnotch-toast run pack:check\n```\n\n### Repository layout\n\n```text\napp\u002F                         Next.js marketing site, documentation, and metadata\ncomponents\u002F                  Site components and UI primitives\npackages\u002Fnotch-toast\u002F        Published React package, tests, CLI, and skill\npublic\u002Fr\u002Fnotch-toaster.json  shadcn registry entry\ntests\u002F                       Shared test configuration\n```\n\n## Contributing\n\nContributions are welcome. Read [CONTRIBUTING.md](.\u002FCONTRIBUTING.md) for setup,\nquality checks, pull-request expectations, and the complete fork workflow.\nPlease also follow the [Code of Conduct](.\u002FCODE_OF_CONDUCT.md).\n\n### Fork workflow\n\n1. Fork [Devsethi3\u002Fnotch-toast](https:\u002F\u002Fgithub.com\u002FDevsethi3\u002Fnotch-toast) on GitHub.\n2. Clone your fork and configure the canonical repository as `upstream`:\n\n   ```bash\n   git clone https:\u002F\u002Fgithub.com\u002FYOUR-USERNAME\u002Fnotch-toast.git\n   cd notch-toast\n   git remote add upstream https:\u002F\u002Fgithub.com\u002FDevsethi3\u002Fnotch-toast.git\n   git fetch upstream\n   ```\n\n3. Create a focused branch, make the change, and run the relevant checks.\n4. Push your fork and open a pull request against the default branch.\n\n## License\n\nDistributed under the [MIT License](.\u002FLICENSE). Copyright © 2026\nnotch-toast contributors.\n\n## Author\n\nCreated and maintained by [Dev Sethi](https:\u002F\u002Fdevsethi.site). Follow updates on\n[X](https:\u002F\u002Fx.com\u002Fimsethidev).\n",2,"2026-10-31 04:26:50","CREATED_QUERY"]