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