Announcement

Copy Markdown

Inline notice for short, prominent updates.

PreviewCode

Releasev2.1.0 — Dark mode, faster builds, and 12 new components

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/announcement

Announcement
├── Badge
└── AnnouncementTitle

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

<Announcement>
  <Badge>
    <SparklesIcon />
  </Badge>
  <AnnouncementTitle>New feature added</AnnouncementTitle>
</Announcement>

PreviewCode

MaintenanceScheduled downtime tonight 2–4 AM UTC. No action needed.

PreviewCode

PreviewCode

Trial endingYour free trial expires in 3 days. Upgrade to keep access.

PreviewCode

Payment failedYour last invoice couldn't be processed. Update your billing info.

PreviewCode

New featuresDark mode and 12 new components available

The asChild prop renders a link with announcement styling.

PreviewCode

The announcement supports a title-only layout without the badge component.

PreviewCode

New features added, check the logs for more details.

Root wrapper for announcement banners or notices.

Main title or message of the announcement.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

[

Alert ](/docs/components/alert)[

Aspect Ratio ](/docs/components/aspect-ratio)

On This Page