Announcement

Pill-shaped news link with a highlighted tag, a periodic shine sweep and a chevron that extends into an arrow on hover.

NewIntroducing Motion primitives 2.0

Ship interfaces that feel alive

Accessible, animated building blocks you copy into your app and make your own.

Read the 2.0 migration guide

Open

children

tag

shine

arrow

Installation

npx shadcn@latest add @glint-ui/announcement

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/announcement.json

Usage

import { Announcement } from "@/components/ui/announcement";

<Announcement href="/blog/v2" tag="New">
  Introducing Motion primitives 2.0
</Announcement>

Props

Prop	Type	Default	Description
children	string	"Introducing Motion primitives 2.0"	Announcement text.
tag	string	"New"	Highlighted chip text (empty for none).
shine	boolean	true	Periodic light sweep.
arrow	boolean	true	Trailing arrow that extends on hover.
href	ReactNode	—	Link target; all anchor attributes are forwarded.
className	string	—	Extra classes for the root element.