🚀 Beta mode be careful of the bugs

Notification

Displays a callout for user attention.

Preview

The Badge component is used to display important messages to users. It comes with several sub components to structure the content effectively.

Alert
Alert

Installation

  pnpm dlx shadcn@latest add http://localhost:3000/r/hello-world.json

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/badge"

Examples

Notification 01

Some information is missing!

Notification 02

An error occurred!

Notification 03

Completed successfully!

Notification 04

Just a quick note!

Notification 05

Some info is missing!

Link
Notification 06

An error occurred!

Link
Notification 07

Completed successfully!

Link
Notification 08

Just a quick note!

Link
Notification 09

You‘ve made changes!

Notification 10

Message sent

·
Notification 11

Something requires your action!

It conveys that a specific action is needed to resolve or address a situation.

Notification 12

We couldn‘t complete your request!

It indicates that an issue has prevented the processing of the request.

Notification 13

Your request was completed!

It demonstrates that the task or request has been processed.

Notification 14

Here is some helpful information!

It aims to provide clarity or support for better decision-making.

Notification 15

We Value Your Privacy 🍪

We use cookies to improve your experience, and show personalized content.

Notification 16

Version 1.4 is now available!

This update contains several bug fixes and performance improvements.

Notification 17
Mary Palmer

Mary Palmer mentioned you in project-campaign-02.

2 min ago

Notification 18

Live in 27 hours

November 20 at 8:00 PM.

Notification 19
Notification 20
Notification
Notification 21
Notification 22
Notification 23

We use cookies to improve your experience and show personalized content.

On this page