@tour-kit/announcementsHeadless
HeadlessSlideout
HeadlessAnnouncementSlideout: unstyled drawer primitive with slide animation state and content sections via render props
HeadlessSlideout
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>
);
}}
/>