@tour-kit/announcementsHeadless
HeadlessSlideout
HeadlessAnnouncementSlideout: unstyled drawer primitive with slide animation state and content sections via render props
domidex01Published
Unstyled slideout panel that provides state and behavior through render props.
Additional Render Props
Prop
Type
Example
import { HeadlessSlideout } from '@tour-kit/announcements/headless';
<HeadlessSlideout
id="changelog"
render={({ isVisible, config, hide, position, size }) => {
if (!isVisible) return null;
return (
<div className="slideout-container">
<div className="overlay" onClick={hide} />
<div
className={`slideout ${position} ${size}`}
role="complementary"
>
<h2>{config.title}</h2>
<p>{config.description}</p>
<button onClick={hide}>Close</button>
</div>
</div>
);
}}
/>Related
<Slideout>— styled counterpart with built-in slide animation.<HeadlessBanner>,<HeadlessModal>,<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 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.