Announcement Components

Pre-built, accessible announcement components styled with Tailwind CSS. Choose from 5 UI variants for different use cases.

Available Components

Shared Components

All variants use these shared components:

• AnnouncementOverlay - Backdrop overlay for modals and spotlights
• AnnouncementClose - Close button with accessibility
• AnnouncementContent - Content container with title and description
• AnnouncementActions - Action buttons layout

Basic Usage

import {
  AnnouncementsProvider,
  AnnouncementModal,
  AnnouncementBanner,
} from '@tour-kit/announcements';

const announcements = [
  {
    id: 'welcome',
    variant: 'modal',
    title: 'Welcome!',
    description: 'Thanks for joining.',
  },
  {
    id: 'notice',
    variant: 'banner',
    title: 'Maintenance scheduled for tonight',
  },
];

function App() {
  return (
    <AnnouncementsProvider announcements={announcements}>
      {/* Render component for each announcement */}
      <AnnouncementModal id="welcome" />
      <AnnouncementBanner id="notice" />

      <YourApp />
    </AnnouncementsProvider>
  );
}

Common Props

All components share these props:

• id (required) - Announcement identifier matching config
• className - Additional CSS classes
• asChild - Use Slot pattern for custom elements

Choosing a Variant

Styling

All components use Tailwind CSS with CSS variables for theming:

:root {
  --announcement-overlay-bg: rgba(0, 0, 0, 0.5);
  --announcement-modal-bg: white;
  --announcement-border-radius: 0.5rem;
}

See individual component pages for variant-specific styling.

Accessibility

All components are built with accessibility in mind:

• ARIA roles - Proper semantic roles (dialog, banner, status, etc.)
• Focus management - Trap focus in modals, restore on close
• Keyboard support - Escape to close, Tab navigation
• Screen readers - Descriptive labels and live regions
• Reduced motion - Respects prefers-reduced-motion

Next Steps

Explore each component variant for detailed props and examples:

• Modal - Centered dialog
• Slideout - Side panel
• Banner - Top/bottom bar
• Toast - Corner notification
• Spotlight - Element highlight