Announcement Banner

Full-width tinted banner with a tag pill, headline, CTA button, and a dismiss control.

AnnouncementBeste v3 is now in open beta
Early access to the new editor, theming, and live previews.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Notification16 } from "@/components/beste/piece/notification16";

<Notification16
  tag="Announcement"
  title="Beste v3 is now in open beta"
  description="Early access to the new editor, theming, and live previews."
  action="Try it out"
  dismissible={true}
/>

More Notification pieces

View all Notification
Your card was declinedUpdate the payment method on file to retry the charge.

Alert Toast

notification2

Tinted alert with error, warning, or info severities. Optional dismiss × on the right.

Payment successfulYour invoice has been sent to billing@beste.co

Success Toast

notification1

Notification with a circled icon, title, description, and an optional action link.

12
Notifications

Bell Badge

notification17

Bell icon with a pinging count badge that caps at 99+ and sits in a rounded pill.

Elena Park
Elena Park2m
Just pushed the redesign. Take a look when you have a sec 🙌

Message Preview

notification4

Chat notification showing sender avatar, message snippet, timestamp, and an unread dot.

Linear
Linearnow
New issue assignedENG-482 · Crash on checkout submit

Push Notification

notification3

Mobile-style push toast with app icon tile, timestamp, and a two-line preview.

Weekly product syncToday, 14:00 – 14:30
in 10 min
Google Meet6

Calendar Reminder

notification12

Upcoming-meeting card with a starts-soon pill, video location, and attendee count.