Announcement

An announcement component that highlights key info with icons, effects, and expandable content.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/announcement.json

Usage

import {
  Announcement,
  AnnouncementTag,
  AnnouncementTitle,
} from '@/components/ui/announcement';

<Announcement movingBorder>
    <AnnouncementTag lustre>Latest update</AnnouncementTag>
    <AnnouncementTitle>
      New feature added
      <ArrowUpRightIcon className="shrink-0 text-muted-foreground" size={16} />
    </AnnouncementTitle>
  </Announcement>

Examples

Default

Themes

Styled

Expandable

API Reference

Announcement

An announcement component that highlights key info with icons, effects, and expandable content.

Props

Property	Type	Default	Description
`variant`	string	`'outline'`	Badge style variant. Used in: Announcement.
`styled`	boolean	`false`	Adds subtle border styling. Used in: Announcement.
`animation`	'fade'	`'fade'`	Controls announcement animation. Used in: Announcement.
`icon`	ReactNode	`-`	Optional icon element. Used in: Announcement.
`iconPosition`	'left' \| 'right'	`'left'`	Controls icon placement. Used in: Announcement.
`shiny`	boolean	`false`	Applies lustre text effect to children. Used in: Announcement.
`movingBorder`	boolean	`false`	Enables animated moving border. Used in: Announcement, AnnouncementTag.
`movingBorderDuration`	number	`3000`	Duration of moving border animation in ms. Used in: Announcement, AnnouncementTag.
`movingBorderClassName`	string	`-`	Custom classes for moving border element. Used in: Announcement, AnnouncementTag.
`lustre`	boolean	`false`	Applies lustre text effect to text. Used in: AnnouncementTag, AnnouncementTitle.
`multiTags`	boolean	`false`	Allows multiple tags by wrapping content. Used in: AnnouncementTitle.
`children`	ReactNode	`required`	Content inside the component. Used in: Announcement, AnnouncementTag, AnnouncementTitle, AnnouncementContainer, AnnouncementExpandedContent.