Announcement

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

Installation

npx shadcn@latest add @scrollxui/announcement

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-solid'`	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.