Announcement
A small pill above a hero pointing to news: a release, a beta or a post. A link when it has an href.
npx prodular-ui add announcementBadges and links
New and Beta link to a post; the last one is plain text.
NewAI form fill reads receipts and invoicesBetaAgents can now chase overdue invoicesSeries A, led by Northbeam Ventures
import { Announcement } from "@/components/ui/announcement"
export default function AnnouncementVariants() { return ( <div className="flex flex-col items-center gap-3"> <Announcement badge="New" href="#"> AI form fill reads receipts and invoices </Announcement> <Announcement badge="Beta" href="#"> Agents can now chase overdue invoices </Announcement> <Announcement>Series A, led by Northbeam Ventures</Announcement> </div> )}Anatomy
<Announcement badge="New" href="/blog/ai-form-fill">AI form fill reads receipts</Announcement>Guidance
Use it when
- One piece of news above the hero title.
- badge for a single word like New or Beta.
Avoid
- More than one announcement on a page.
- Long sentences. It truncates on small screens.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Place it directly above SectionHeader in the hero, centered with it.
- Keep the text under about 50 characters and link to the full story.
API
Announcement
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | ReactNode | A word in front. | |
| href | string | Makes it a link with an arrow. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add announcement# or, with the registry in components.jsonnpx shadcn@latest add @prodular/announcement