@tour-kit/announcementsHeadless
HeadlessToast
HeadlessAnnouncementToast: unstyled notification primitive with auto-dismiss timer and position data via render props
domidex01Published
Unstyled toast notification that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessToast } from '@tour-kit/announcements/headless';
<HeadlessToast
id="tip"
render={({ isVisible, config, position, intent, progress, remainingTime }) => {
if (!isVisible) return null;
return (
<div
className={`toast ${position} ${intent}`}
role="status"
aria-live="polite"
>
<p>{config.title}</p>
{config.toastOptions?.showProgress && (
<div className="progress-bar">
<div className="progress" style={{ width: `${progress}%` }} />
</div>
)}
<span className="time">{Math.ceil(remainingTime / 1000)}s</span>
</div>
);
}}
/>Related
<Toast>— styled counterpart with default auto-dismiss timer and positioning.<HeadlessBanner>,<HeadlessModal>,<HeadlessSlideout>,<HeadlessSpotlight>— sibling headless primitives for the other display variants.- Headless overview — when to reach for headless vs. styled.
useAnnouncementanduseAnnouncementQueue— the hooks this primitive exposes via render props.- Frequency configuration — control how often the toast re-appears.
Ship onboarding, not config.
npm i @tour-kit/core is MIT and free. The Pro packages work unlicensed too — a one-time $99 license removes the production watermark when you ship.
MIT-licensed — no signup, no credit card. Pay once, only when you ship.