Skip to content
Starlight Announcement

Live Demos

Explore live demos of all announcement features. Each demo page displays real announcements configured specifically for that page, so you can see the plugin in action with real configurations.

Available Demos

Section titled “Available Demos”
Variants See all four visual styles: note (blue), tip (green), caution (orange), and danger (red).
Links & CTAs Announcements with call-to-action buttons linking to internal and external pages.
Dismissible Compare dismissible announcements with non-dismissible critical alerts.
Display Modes Stack multiple banners, show only the first, or rotate through them.
Rotate Mode See the rotate carousel with clickable dot indicators in action.
Scheduling Time-based visibility using start and end dates.

Quick Preview

Section titled “Quick Preview”

Here’s a taste of the configurations used in each demo:

Variants

Section titled “Variants”

Four visual styles matching Starlight’s aside colors:

{ id: 'note', content: 'General information', variant: 'note' }
{ id: 'tip', content: 'Helpful tips', variant: 'tip' }
{ id: 'caution', content: 'Warning notice', variant: 'caution' }
{ id: 'danger', content: 'Critical alert', variant: 'danger' }

Links & CTAs

Section titled “Links & CTAs”

Add call-to-action buttons to drive user engagement:

{
  id: 'with-link',
  content: 'New documentation available!',
  link: {
    text: 'Read the docs',
    href: '/getting-started/',
  },
}

Dismissible

Section titled “Dismissible”

Control whether users can dismiss announcements:

// User can dismiss (default)
{ id: 'dismissible', content: '...', dismissible: true }


// Cannot be dismissed - always visible
{ id: 'critical', content: '...', dismissible: false }

Display Modes

Section titled “Display Modes”

Control how multiple announcements appear:

starlightAnnouncement({
  displayMode: 'stack',   // Show all (default)
  displayMode: 'first',   // Show only first match
  displayMode: 'rotate',  // Cycle through with animation
  rotateInterval: 5000,   // 5 seconds between transitions
})

Scheduling

Section titled “Scheduling”

Show announcements only during specific time periods:

{
  id: 'event',
  content: 'Conference starts tomorrow!',
  startDate: '2026-03-01',
  endDate: '2026-03-15',
}

How These Demos Work

Section titled “How These Demos Work”

Each demo page has announcements targeted using the showOn option. This lets you see specific features in isolation:

{
  id: 'demo-variant-note',
  content: 'This is a note variant.',
  variant: 'note',
  showOn: ['/demos/variants/', '/demos/variants/**'],
}

The announcements are fully functional - you can dismiss them, click links, and watch rotations. To reset dismissed announcements, clear the starlight-announcements-dismissed key from your browser’s localStorage.

Configuration Reference

Section titled “Configuration Reference”

For detailed documentation on all options, see: