Success Toast

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

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

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

Import & use

import { Notification1 } from "@/components/beste/piece/notification1";

<Notification1
  title="Payment successful"
  description="Your invoice has been sent to billing@beste.co"
  action="View receipt →"
/>

More Notification pieces

View all Notification

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.

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.

Uploading64%

product-hero-final.mp4

Upload Toast

notification15

Live progress card with spinner, percent, filename, and a cancel × at the end of the row.

Achievement unlockedShipped 10 pull requests this week

+250 XP

Achievement Toast

notification6

Celebratory unlock notice with a gradient trophy tile and an XP chip on the right.

AnnouncementBeste v3 is now in open beta

Early access to the new editor, theming, and live previews.

Announcement Banner

notification16

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

Deployed42s

fix: resolve cart rounding edge case

a1b2c3d·main

Deployment Toast

notification7

CI/CD status card with branch, short commit sha, duration, and a building or failed state.