Marketing

Announcement

new

A pill above a hero headline with a tag, a title and an arrow.

Ship forms that feel finished

Installation

npx shadcn@latest add @blank/announcement

Usage

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

<Announcement asChild>
  <a href="/changelog">
    <AnnouncementTag>New</AnnouncementTag>
    <AnnouncementTitle>
      Read the release notes
      <ArrowRightIcon />
    </AnnouncementTitle>
  </a>
</Announcement>

With asChild the pill becomes your link or button and picks up a hover surface and a focus ring; a trailing icon in the title nudges forward on hover. The pill never wraps. A title that does not fit is clipped; wrap the text in a <span> to end it in an ellipsis instead.

Examples

Variants

brand tints the pill with the identity color for the one announcement that matters most on a page.

v3.2Read the release notesFree while in beta

API Reference

Announcement

Prop	Type	Default
`variant`	`"default" \| "brand"`	`"default"`
`asChild`	`boolean`	`false`

AnnouncementTag and AnnouncementTitle are spans that take any span props.