@tour-kit/announcementsComponents
AnnouncementSlideout
AnnouncementSlideout component: side panel drawer for detailed product updates with rich content and multiple sections
AnnouncementSlideout
A slide-in panel from the left or right side. Best for detailed announcements that don't require immediate attention.
When to Use
- Product changelogs
- Detailed feature explanations
- Multi-step announcements
- Less critical updates
Basic Usage
import { AnnouncementsProvider, AnnouncementSlideout } from '@tour-kit/announcements';
const announcements = [
{
id: 'changelog',
variant: 'slideout',
title: "What's New in v2.0",
description: 'Check out the latest features and improvements.',
slideoutOptions: {
position: 'right',
size: 'md',
},
},
];
<AnnouncementSlideout id="changelog" />Slideout Options
Prop
Type
Complete Example
{
id: 'product-update',
variant: 'slideout',
title: 'Product Update - March 2024',
media: {
type: 'image',
src: '/update-banner.png',
},
description: `
We've shipped some amazing updates this month:
• New dashboard design
• Advanced filtering
• Mobile app improvements
`,
primaryAction: {
label: 'See All Updates',
onClick: () => router.push('/changelog'),
},
slideoutOptions: {
position: 'right',
size: 'lg',
},
}Position
// Slide from right (default)
slideoutOptions: { position: 'right' }
// Slide from left
slideoutOptions: { position: 'left' }Size Variants
// Small - 320px
slideoutOptions: { size: 'sm' }
// Medium - 400px
slideoutOptions: { size: 'md' }
// Large - 500px
slideoutOptions: { size: 'lg' }
// Full screen
slideoutOptions: { size: 'full' }