@tour-kit/announcementsHeadless
HeadlessBanner
HeadlessAnnouncementBanner: unstyled banner primitive with dismiss and action state exposed via render props for theming
domidex01Published
Unstyled banner bar that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessBanner } from '@tour-kit/announcements/headless';
<HeadlessBanner
id="notice"
render={({ isVisible, config, dismiss, position, intent, sticky }) => {
if (!isVisible) return null;
return (
<div
className={`banner ${position} ${intent} ${sticky ? 'sticky' : ''}`}
role="banner"
>
<p>{config.title}</p>
{config.bannerOptions?.dismissable && (
<button onClick={() => dismiss()}>×</button>
)}
</div>
);
}}
/>Related
<Banner>— styled counterpart with default theming and dismiss UI.<HeadlessModal>,<HeadlessSlideout>,<HeadlessToast>,<HeadlessSpotlight>— sibling headless primitives for the other display variants.- Headless overview — when to reach for headless vs. styled.
useAnnouncement— the hook this primitive exposes via render props.<AnnouncementsProvider>— required ancestor.
Ship onboarding, not config.
npm i @tour-kit/core is free while you build. Every package works unlicensed in development, a one-time licence from $9.99 removes the production watermark when you ship.
Free in development, no signup, no credit card. Pay once, only when you ship.