Announcement Ticker
Data Display
Layout
News-style single line ticker with NEW badges.
Preview
Hover to pause animation
NEW🚀 New: GPT-4o support now available•
📊 Model evaluation reports now export to PDF•
🎉 Over 1 million evaluations completed this month•
NEW⚡ 40% faster inference with our new engine•
🔒 SOC 2 Type II certification achieved•
NEW🚀 New: GPT-4o support now available•
📊 Model evaluation reports now export to PDF•
🎉 Over 1 million evaluations completed this month•
NEW⚡ 40% faster inference with our new engine•
🔒 SOC 2 Type II certification achieved•
Props
Component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
announcements | Announcement[] | Default announcements | Array of announcements to display |
duration | number | 20 | Animation duration in seconds |
pauseOnHover | boolean | true | Pause animation on hover |
newBadgeText | string | "NEW" | Text for new badge |
className | string | — | Additional CSS classes |
Usage
Import and implementation examples
import { AnnouncementTicker } from '@/components/ui/announcement-ticker'
import type { Announcement } from '@/components/ui/announcement-ticker'
// Basic usage with default announcements
<AnnouncementTicker />
// Custom announcements
<AnnouncementTicker
announcements={[
{ id: 1, text: '🚀 New feature released', isNew: true },
{ id: 2, text: '📊 Check out our latest report', isNew: false },
{ id: 3, text: '🎉 1M users milestone', isNew: false }
]}
/>
// Custom duration and badge text
<AnnouncementTicker
announcements={announcements}
duration={30}
newBadgeText="HOT"
/>This block is self-contained (no UI component dependencies)
Types
TypeScript interface definition
interface Announcement {
id: string | number
text: string
isNew?: boolean
}Features
Built-in functionality
- News-style ticker tape: Continuous scrolling animation for announcements
- NEW badges: Highlight recent announcements with customizable badge text
- Seamless loop: Duplicated announcements for infinite scrolling effect
- Configurable speed: Adjust animation duration to control scroll speed
- Pause on hover: Automatically pause animation when user hovers
- Bullet separators: Visual separators between announcements
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
role="marquee" for scrolling contentaria-live="polite" for announcementsKeyboard Navigation
| Key | Action |
|---|---|
| Hover | Pause animation |
Notes
- Pause on hover allows reading content
- NEW badges have accessible labels
- Consider static alternative for screen readers