HeadlessSlideout

HeadlessAnnouncementSlideout: unstyled drawer primitive with slide animation state and content sections via render props

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>
    );
  }}
/>

HeadlessSlideout

Additional Render Props

Example

On this page